Ngx-dragdrop NPM

ngx-dragdrop

A minimal angular 2.0+ module library for Drag and Drop using native HTML5 Drag and Drop.

Demo: https://envyn.github.io/ngx-dragdrop/

Installation

Install with npm:

$ npm install ngx-dragdrop

Note: For angular 4-5 projects, use ngx-dragdrop@^1.0.1

$ npm install ngx-dragdrop@^1.0.1

Add the ngx-dragdrop module as a dependency to your application module:

import { NgxDragDropModule } from 'ngx-dragdrop';

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

Usage

Minimal Example

<div [ngxDraggable]="true"
    [ngxDraggedClass]="'draggedClass'" 
    [ngxDragTag]="'dragType1'"
    [ngxDragData]="{a:4,b:6}">
</div>
<div (ngxDroppable)="onDrop($event)"
    [ngxDropData]="{dropObjectName:'foo'}"
    [ngxDropTags]="['dragType1','dragType2']">
</div>

onDrop(event:IOnDropData}){
    
}

Drag API

`ngx-draggable`

<div [ngxDraggable]="true">

If ngxDraggable is true, users will be able to drag the node/element.

`ngxDraggedClass`

<div [ngxDraggable]="true" ngxDraggedClass="draggedCls">

ngxDraggedClass allows you to add a class(draggedCls) when the drag on the element starts. The class is removed from the node on dragend.

`ngxDragTag`

<div [ngxDraggable]="true" ngxDragTag="dragType1">

ngxDragTag allows you to categorise elements into different drag types. A node of dragType 'foo' will only be droppable inside a node which has 'foo' in its ngxDropTags

`ngx-dragData`

<div [ngxDraggable]="true" [ngxDragData]="{a:4,b:6}">

ngxDragData allows you to attach data to the draggable node.

The data associated to ngxDragData would be serialised while dragStar and put into the HTML5 dataTransfer object.

Drop API

`ngxDroppable`

<div (ngxDroppable)="onDrop($event)">

if ngxDroppable is present, dragged elements can be dropped on them. If an ngxDragTag is present on the dragged node, the same should be present in the ngxDropTags array for drag to be allowed

`ngxDropTags`

<div (ngxDroppable)="onDrop($event)" [ngxDropTags]="['foo','bar','dragType1', 'dragType3']">

ngxDropTags allows you to determine all the dragTag types that are allowed to be dropped on this node. This expects an array of strings

`ngxDropData`

<div (ngxDroppable)="onDrop($event)" [ngxDropData]="{a:4,b:6}">

ngxDropData allows you to attach data to the droppable node.

Drop Event Object Interface

The object that is passed to the dropHandler defined as the value for (ngxDroppable) is of type IOnDropData with following keys: dragTag, dragData, dropData

Since the directives use HTML dataTransfer Object, the ngxDragData is a copy(deserialized event dataTransfer object) of the original object, it is recommended that only uniquely identifying data for the dragged nodes be passed into ngxDragData and the original object if needed, be retrieved using this information.

Contribute

Fork the repo
get your local git clone of the repo fork using git clone ...
Run yarn install --pure-lockfile
Run yarn start (You should have your local app running at http://localhost:4200)
Make fixes/changes
Commit and push to fork
Send pull request from GitHub