ngx-smooth-dnd

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.

This library consists wrapper Angular components over smooth-dnd library.

Show, don't tell !

Demo page

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

dragStart

Event to be emitted only by all Containers when a drag is started.

(dragStart)="onDragStart($event)"

onDragStart({isSource: boolean, payload: any, willAcceptDrop: boolean}) {
  ...
}

Parameters

• isSource : boolean : true if it is called by the container which drag starts from otherwise false.
• payload : object : the payload object that is returned by get-child-payload function. It will be undefined in case get-child-payload is not set.
• willAcceptDrop : boolean : true if the dragged item can be dropped into the container, otherwise false.

dragEnd

The function to be called by all container when drag ends. Called before drop event.

(dragEnd)="onDragEnd($event)"

onDragEnd({isSource: boolean, payload: any, willAcceptDrop: boolean}) {
  ...
}

Parameters

• isSource : boolean : true if it is called by the container which drag starts from otherwise false.
• payload : object : the payload object that is returned by get-child-payload function. It will be undefined in case get-child-payload is not set.
• willAcceptDrop : boolean : true if the dragged item can be dropped into the container, otherwise false.

dropReady

The function to be called by the container which is being drag over, when the index of possible drop position changed in container. Basically it is called each time the draggables in a container slides for opening a space for dragged item. dropResult is the only parameter passed to the function which contains the following properties.

(drop)="onDropReady($event)"

onDropReady(dropResult: IDropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}

Parameters

• dropResult : object
  • removedIndex : number : index of the removed children. Will be null if no item is removed.
  • addedIndex : number : index to add droppped item. Will be null if no item is added.
  • payload : object : the payload object retrieved by calling getChildPayload function.
  • element : DOMElement : the DOM element that is moved

drop

The event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant.

(drop)="onDrop($event)"

onDrop(dropResult: IDropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}

Parameters

• dropResult : object
  • removedIndex : number : index of the removed children. Will be null if no item is removed.
  • addedIndex : number : index to add droppped item. Will be null if no item is added.
  • payload : object : the payload object retrieved by calling getChildPayload function.
  • element : DOMElement : the DOM element that is moved

getChildPayload

The function to be called to get the payload object to be passed onDrop function.

[getChildPayload]="getChildPayload"

getChildPayload(index: number) {
  return {
    ...
  }
}

Parameters

• index : number : index of the child item

Returns

• payload : object

shouldAnimateDrop

The function to be called by the target container to which the dragged item will be droppped. Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning false. If not set drop animations are enabled.

[shouldAnimateDrop]="shouldAnimateDrop"

shouldAnimateDrop(sourceContainerOptions: IContainerOptions, payload: any) {
  return false;
}

Parameters

• sourceContainerOptions : IContainerOptions : options of the source container. (parent container of the dragged item)
• payload : object : the payload object retrieved by calling getChildPayload function.

Returns

• boolean : true / false

shouldAcceptDrop

The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the groupName property and only the return value of this function will be taken into account.

[shouldAcceptDrop]="shouldAcceptDrop"

shouldAcceptDrop(sourceContainerOptions, payload) {
  return true;
}

Parameters

• sourceContainerOptions : IContainerOptions : options of the source container. (parent container of the dragged item)
• payload : object : the payload object retrieved by calling getChildPayload function.

Returns

• boolean : true / false

onDragEnter

The event to be emitted by the relevant container whenever a dragged item enters its boundaries while dragging.

(dragEnter)="onDragEnter()"

onDragEnter() {
  ...
}

onDragLeave

The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging.

(dragLeave)="onDragLeave()"

onDragLeave() {
  ...
}

getGhostParent

The function to be called to get the element that the dragged ghost will be appended. Default parent element is the container itself. The ghost element is positioned as 'fixed' and appended to given parent element. But if any anchestor of container has a transform property, ghost element will be positioned relative to that element which breaks the calculations. Thats why if you have any transformed parent element of Containers you should set this property so that it returns any element that has not transformed parent element.

(getGhostParent)="getGhostParent()"

getGhostParent() {
  // i.e return document.body;
}

smooth-dnd-draggable

Wrapper component for smooth-dnd-container's children. Every draggable element should be wrapped with smooth-dnd-draggable component.