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); } }