| Author: | misha130 |
|---|---|
| Official Page: | Go to website |
| Publish Date: | November 24, 2017 |
| License: | MIT |
Description:
Angular 4+ directives that allow you to build sortable lists with the native HTML5 drag & drop API. The directives can also be nested to bring drag & drop to your WYSIWYG editor, your tree, or whatever fancy structure you are building.
Installation:
# Yarn $ yarn add ngx-drag-and-drop-lists # NPM $ npm install ngx-drag-and-drop-lists --save
Usage:
Import the library into your Angular module.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DndListModule } from 'ngx-drag-and-drop-lists';
import { ContainerComponent } from './components/container.component';
@NgModule({
declarations: [
AppComponent,
ContainerComponent,
],
imports: [
BrowserModule,
DndListModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The example App (app.component.html).
<div class="container">
<div class="dndPlaceholder col-md-12"
#placeholder></div>
<div class="page-header">
<h1>Ngx-drag-and-drop-lists Demo</h1>
<p class="lead">Drag and drop </p>
</div>
<h3>Simple Drag and Drop</h3>
<div class="row">
<div class="col-md-6"
[dndList]
[dndPlaceholder]="placeholder"
[dndModel]="simpleList[0]">
<div *ngFor="let item of simpleList[0]"
class="col-md-12"
[dndType]="'item'"
(dndMoved)="removeItem(item, simpleList[0])"
[dndDraggable]
[dndObject]="item">{{item.name}}</div>
</div>
<div class="col-md-6"
[dndList]
[dndModel]="simpleList[1]"
[dndPlaceholder]="placeholder">
<div *ngFor="let item of simpleList[1]"
class="col-md-12"
[dndType]="'item'"
(dndMoved)="removeItem(item, simpleList[1])"
[dndDraggable]
[dndObject]="item">{{item.name}}</div>
</div>
</div>
<h3>Typed Drag and Drop</h3>
<div class="row">
<div class="col-md-4">
<h4>Only males</h4>
<div [dndList]="{
allowedTypes: ['male']}"
[dndPlaceholder]="placeholder"
[dndModel]="typedList[0]">
<div *ngFor="let item of typedList[0]"
class="col-md-12"
[dndType]="item.type"
(dndMoved)="removeItem(item, typedList[0])"
[dndDraggable]
[dndObject]="item">{{item.name}}</div>
</div>
</div>
<div class="col-md-4">
<h4>Only females</h4>
<div [dndList]="{
allowedTypes: ['female']}"
[dndModel]="typedList[1]"
[dndPlaceholder]="placeholder">
<div *ngFor="let item of typedList[1]"
class="col-md-12"
[dndType]="item.type"
(dndMoved)="removeItem(item, typedList[1])"
[dndDraggable]
[dndObject]="item">{{item.name}}</div>
</div>
</div>
<div class="col-md-4">
<h4>People</h4>
<div [dndList]="{
allowedTypes: ['male','female']}"
[dndModel]="typedList[2]"
[dndPlaceholder]="placeholder">
<div *ngFor="let item of typedList[2]"
class="col-md-12"
[dndType]="item.type"
(dndMoved)="removeItem(item, typedList[2])"
[dndDraggable]
[dndObject]="item">{{item.name}}</div>
</div>
</div>
</div>
<h3>Nested Drag and Drop</h3>
<div class="row">
<div class="col-md-3">
<div class="panel">
<div class="panel-heading">
New Items
</div>
<div class="panel-body">
<li type="button"
*ngFor="let template of nestedList.templates"
[dndType]="template.type"
[dndDraggable]="{effectAllowed:'copy'}"
[dndObject]="template"
(dndCopied)="template.id = template.id + 1"
class="btn btn-default btn-lg col-md-12">
{{template.type}}
</li>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div *ngFor="let dropzone of nestedList.dropzones;let i = index"
class="col-md-6">
<div class="dropzone box box-yellow">
<!-- The dropzone also uses the list template -->
<h3>Dropzone {{i + 1}}</h3>
<div [dndList]="{
allowedTypes: ['item','container']}"
[dndModel]="dropzone"
[dndPlaceholder]="placeholder" class="col-md-12">
<div *ngFor="let item of dropzone">
<container *ngIf="item.type === 'container'"
[list]="dropzone"
[model]="item"></container>
<div *ngIf="item.type === 'item'"
[dndType]="item.type"
[dndDraggable]
(dndMoved)="removeItem(item, dropzone)"
[dndObject]="item"
class="col-md-12">{{item.type}} {{item.id}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The example app (app.component.ts).
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public simpleList = [
[
{ 'name': 'John' },
{ 'name': 'Smith' },
{ 'name': 'George' },
],
[
{ 'name': 'Jennifer' },
{ 'name': 'Laura' },
{ 'name': 'Georgina' },
]
];
public typedList = [
[
{ 'name': 'John', 'type': 'male' },
{ 'name': 'Smith', 'type': 'male' },
{ 'name': 'George', 'type': 'male' },
],
[
{ 'name': 'Jennifer', 'type': 'female' },
{ 'name': 'Laura', 'type': 'female' },
{ 'name': 'Georgina', 'type': 'female' },
],
[
{ 'name': 'Timmy', 'type': 'male' },
{ 'name': 'Karen', 'type': 'female' },
]
];
public nestedList = {
selected: null,
templates: [
{ type: "item", id: 2 },
{ type: "container", id: 1, columns: [[], []] }
],
dropzones: [[
{
"type": "container",
"id": 1,
"columns": [
[
{
"type": "item",
"id": "1"
},
{
"type": "item",
"id": "2"
}
],
[
{
"type": "item",
"id": "3"
}
]
]
},
{
"type": "item",
"id": "4"
},
{
"type": "item",
"id": "5"
},
{
"type": "item",
"id": "6"
}
],
[
{
"type": "item",
"id": 7
},
{
"type": "item",
"id": "8"
},
{
"type": "container",
"id": "2",
"columns": [
[
{
"type": "item",
"id": "9"
},
{
"type": "item",
"id": "10"
},
{
"type": "item",
"id": "11"
}
],
[
{
"type": "item",
"id": "12"
},
{
"type": "container",
"id": "3",
"columns": [
[
{
"type": "item",
"id": "13"
}
],
[
{
"type": "item",
"id": "14"
}
]
]
},
{
"type": "item",
"id": "15"
},
{
"type": "item",
"id": "16"
}
]
]
},
{
"type": "item",
"id": 16
}
]]
};
constructor() {
}
public removeItem(item: any, list: any[]): void {
list.splice(list.indexOf(item), 1);
}
}
