Drag-and-drop List Component For Angular

Author: misha130
Publish Date:
Official Page: Go to website
Views Total: 118
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);
  }
}

Preview:

ngx-drag-and-drop-lists

Leave a Reply