Repository files navigation

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

Install withnpm:

$ 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 { }

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

<div[ngxDraggable]="true">

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

<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.

<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 itsngxDropTags

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

ngxDragData allows you to attach data to the draggable node.

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

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

ifngxDroppable is present, dragged elements can be dropped on them.If anngxDragTag is present on the dragged node, the same should be present in thengxDropTags array for drag to be allowed

<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

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

ngxDropData allows you to attach data to the droppable node.

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

Since the directives use HTML dataTransfer Object, thengxDragData 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 intongxDragData and the original object if needed, be retrieved using this information.

• Fork the repo
• get your local git clone of the repo fork usinggit clone ...
• Runyarn install --pure-lockfile
• Runyarn build-lib:w to build the library locally and watch for changes
• Runyarn start (You should have your local app running athttp://localhost:4200)
• Make fixes/changes
• Commit and push to fork
• Send pull request from GitHub

MIT