Lightweight drag & drop, sortable library for Angular

by Posted on

A fast and lightweight drag&drop, sortable library for Angular with many configuration options covering many d&d scenarios. It uses css transitions for animations so it’s hardware accelerated whenever possible.
Lightweight drag & drop, sortable library for Angular

Installation

npm i ngx-smooth-dnd

Usage

Add NgxSmoothDnDModule to your app module imports

import { NgxSmoothDnDModule } from 'ngx-smooth-dnd';

@NgModule({
  imports: [
    NgxSmoothDnDModule
  ],
  bootstrap: [AppComponent]
  ...
})
export class AppModule { }




import { Component } from '@angular/core';
import { ContainerComponent, DraggableComponent, IDropResult } from 'ngx-smooth-dnd';
import { applyDrag, generateItems } from './utils';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div class="simple-page">
        <smooth-dnd-container (drop)="onDrop($event)">            
          <smooth-dnd-draggable *ngFor="let item of items">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </smooth-dnd-draggable>
        </smooth-dnd-container>
      </div>
    </div>
  `
})
export class AppComponent {
  items = generateItems(50, i => ({ data: 'Draggable ' + i }))

  onDrop(dropResult: IDropResult) {
    // update item list according to the @dropResult
    this.items = applyDrag(this.items, dropResult);
  }
}

API

smooth-dnd-container

Component that contains the draggable elements or components. Each of its children should be wrapped by smooth-dnd-draggable component

Properties

Property Type Default Description
[orientation] string vertical Orientation of the container. Can be horizontal or vertical.
[behaviour] string move Property to describe weather the dragging item will be moved or copied to target container. Can be move or copy or drop-zone or contain.
[groupName] string undefined Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overriden by shouldAcceptDrop function. See below.
[lockAxis] string undefined Locks the movement axis of the dragging. Possible values are x, y or undefined.
[dragHandleSelector] string undefined Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.
[nonDragAreaSelector] string undefined Css selector to prevent dragging. Can be useful when you have form elements or selectable text somewhere inside your draggable item. It has a precedence over dragHandleSelector.
[dragBeginDelay] number 0 (200 for touch devices) Time in milisecond. Delay to start dragging after item is pressed. Moving cursor before the delay more than 5px will cancel dragging.
[animationDuration] number 250 Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.
[autoScrollEnabled] boolean true First scrollable parent will scroll automatically if dragging item is close to boundaries.
[dragClass] string undefined Class to be added to the ghost item being dragged. The class will be added after it’s added to the DOM so any transition in the class will be applied as intended.
[dropClass] string undefined Class to be added to the ghost item just before the drop animation begins.
[dropPlaceholder] boolean,object undefined Options for drop placeholder. className, animationDuration, showOnTop
(dragStart) EventEmitter undefined See descriptions below
(dragEnd) EventEmitter undefined See descriptions below
(dropReady) EventEmitter undefined See descriptions below
(drop) EventEmitter undefined See descriptions below
[getChildPayload] function undefined See descriptions below
[shouldAnimateDrop] function undefined See descriptions below
[shouldAcceptDrop] function undefined See descriptions below
(dragEnter) EventEmitter undefined See descriptions below
(dragLeave) EventEmitter undefined See descriptions below
[getGhostParent] function undefined See descriptions below

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by kutlugsahin. Visit their official repository for more information and follow for future updates.


Published by admin