https://github.com/snorrwe/frenetiq-dnd
Angular 2+ drag'n'drop
https://github.com/snorrwe/frenetiq-dnd
angular angular-2 angular2 drag drag-and-drop drag-n-drop drop frenetiq frenetiq-dnd ng2 ngx
Last synced: 9 months ago
JSON representation
Angular 2+ drag'n'drop
- Host: GitHub
- URL: https://github.com/snorrwe/frenetiq-dnd
- Owner: snorrwe
- License: mit
- Archived: true
- Created: 2017-06-06T16:46:02.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-28T22:52:43.000Z (almost 9 years ago)
- Last Synced: 2025-01-14T08:52:24.100Z (over 1 year ago)
- Topics: angular, angular-2, angular2, drag, drag-and-drop, drag-n-drop, drop, frenetiq, frenetiq-dnd, ng2, ngx
- Language: TypeScript
- Size: 253 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Overview
A simple, but working drag'n'drop framework for Angular2
# Installation
Run `npm install --save ngx-frenetiq-dnd`
# Demo
There's a very basic demo available at [https://snorrwe.github.io/frenetiq-dnd](https://snorrwe.github.io/frenetiq-dnd)
# Usage
* Import the `ngx-frenetiq-dnd` *Module* into your *Module*
```js
import { FrenetiqDnd } from 'ngx-frenetiq-dnd/ngx-frenetiq-dnd';
@NgModule({
//....
imports: [
FrenetiqDnd
]
//....
})
export class AppModule {
}
```
* Make html elements draggable with the `frenetiq-draggable` directive.
* See the [Wiki](https://github.com/snorrwe/Frenetiq-Dnd/wiki/FrenetiqDraggable) for more information about the directive and its options.
```html
Drag me!
Drag me!
```
* Make html elements drop targets with the `frenetiq-container` directive.
* See the [Wiki](https://github.com/snorrwe/Frenetiq-Dnd/wiki/FrenetiqContainer) for more information about the directive and its options.
```html
```
* CSS
* FrenetiqDnd uses the `fren-drag` css class on items that are being _dragged_
* FrenetiqDnd uses the `fren-hover` css class on valid containers when you _drag_ an item over it.
```css
.fren-drag{
background-color:red; /* Make dragged items red */
}
```
* You can listen to events either via the *Directives* or by subscribing to the `DragService`
* See the [Wiki](https://github.com/snorrwe/Frenetiq-Dnd/wiki/DragService) for more information about the service and its API.
```js
@Component({
template: `
Drag me!
`
})
class SomeComponent {
constructor(private dragService: DragService) {
this.dragService
.onDragEnd()
.subscribe((draggable) => {
if (draggable.parent === this) {
//Draggable has been dropped on its parent.
console.log("Oh, you're back!", draggable, this);
}
});
}
private onDragEnd(draggable) {
console.log("Child has been released!", draggable, this);
}
}
```
# Sample code
**_TBA_**
# API Documentation
Please refer to the [Wiki](https://github.com/snorrwe/Frenetiq-Dnd/wiki/)
# Contributing
## Build files
* single run: `npm run build`
* build files and watch: `npm run watch`
## Testing
* Please note that all pull requests must pass the tests in order to be merged into _master_.
This project uses [https://travis-ci.org](https://travis-ci.org) to enforce successful builds on _master_.
* Running the tests locally:
* single run: `npm run test`
* watch: `npm run test-watch`
## Deployment
Deployment is done via Travis CI. Mark the package for deployment by running `npm version `\* in the _dist_ directory
> \* where update\_type is one of the semantic versioning release types, patch, minor, or major.
> For more info go to [npm](https://docs.npmjs.com/getting-started/publishing-npm-packages)
# Credits
* Project setup based on [angular2-webpack](https://github.com/preboot/angular2-webpack)
* Testing strategies found from [Angular — Unit Testing recipes by Gerard Sans](https://medium.com/google-developer-experts/angular-2-unit-testing-with-jasmine-defe20421584)
* [](https://codebeat.co/projects/github-com-snorrwe-frenetiq-dnd-master)
* 
# License
[MIT](/LICENSE)