Angular 2 Drag-and-Drop [](https://travis-ci.org/akserg/ng2-dnd) [](https://www.npmjs.com/package/ng2-dnd) [](https://www.npmjs.com/package/ng2-dnd)[](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/)
=======================
Angular 2 Drag-and-Drop without dependencies.
## Installation
```bash
npm install ng2-dnd --save
```
## Demo
Simple examples using ng2-dnd:
- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)
Online demo available [here](http://akserg.github.io/ng2-webpack-demo)
## Usage
If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:
```js
System.config({
packages: {
"/ng2-dnd": {"defaultExtension": "js"}
}
});
```
Finally, you can use *ng2-dnd* in your Angular 2 project:
- Import `DND_PROVIDERS, DND_DIRECTIVES` from `ng2-dnd/ng2-dnd`;
- Use `DND_PROVIDERS` in the bootstrap of your application;
- Add `DND_DIRECTIVES` to the `directives` property of your application component;
- Use `dnd-draggable` and `dnd-droppable` properties in template of your components.
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `
Simple Drag-and-Drop
Available to drag
Drag Me
Place to drop
Restricted to drop
`
})
export class AppComponent {
constructor() { }
}
```
# Restriction Drag-and-Drop operations with drop zones
You can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element:
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `
Restricting Drag-and-Drop with zones
Available to drag
Drag Me
Zone 1 only
Available to drag
Drag Me
Zone 1 & 2
Zone 1
Zone 2
`
})
export class AppComponent {
constructor() { }
}
```
# Transfer custom data via Drag-and-Drop
You can transfer data from draggable to droppable component via *dragData* property of Draggable component:
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `
Transfer custom data in Drag-and-Drop
Available to drag
Drag Me
{{transferData | json}}
Place to drop (Items:{{receivedData.length}})
{{data | json}}
`
})
export class AppComponent {
transferData:Object = {id:1, msg: 'Hello'};
receivedData:Array = [];
constructor() { }
transferDataSuccess($event) {
this.receivedData.push($event);
}
}
```
# Complex example (includes all shown above) with Drag-and-Drop
Here is an example of shopping backet with products adding via drag and drop operation:
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `
`
})
export class AppComponent {
availableProducts: Array = [];
shoppingBasket: Array = [];
constructor() {
this.availableProducts.push(new Product("Blue Shoes", 3, 35));
this.availableProducts.push(new Product("Good Jacket", 1, 90));
this.availableProducts.push(new Product("Red Shirt", 5, 12));
this.availableProducts.push(new Product("Blue Jeans", 4, 60));
}
orderedProduct(orderedProduct: Product) {
orderedProduct.quantity--;
}
addToBasket(newProduct: Product) {
for (let indx in this.shoppingBasket) {
let product:Product = this.shoppingBasket[indx];
if (product.name === newProduct.name) {
product.quantity++;
return;
}
}
this.shoppingBasket.push(new Product(newProduct.name, 1, newProduct.cost));
}
totalCost():number {
let cost:number = 0;
for (let indx in this.shoppingBasket) {
let product:Product = this.shoppingBasket[indx];
cost += (product.cost * product.quantity);
}
return cost;
}
}
```
# Simple sortable with Drag-and-Drop
Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation:
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `
Simple sortable
Favorite drinks
{{item}}
My prefences: {{i + 1}}) {{item}}
`
})
export class AppComponent {
listOne:Array = ['Coffee','Orange Juice','Red Wine','Unhealty drink!','Water'];
}
```
# Multi list sortable with Drag-and-Drop
Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:
```js
import {Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
template: `