Pri-ng-dragdrop NPM

This is currently an alpha version, and will be polished and released soon!

Drag and drop for nested lists.

Live Demo

Angular

Installation
Usage
Directives

More

Issues
Planned
Author
More Stuff

Installation

NPM

npm install --save pri-ng-dragdrop @angular/cdk

Usage

Import PriDragDropModule in your module

import { PriDragDropModule } from 'pri-ng-dragdrop';

@NgModule({
  imports: [
    PriDragDropModule
  ]
})

Examples coming soon (check out the live demo)

Directives

priDropList

defines a drop list, which contains priDragItem. Drag items need to be direct children of the drop list

priDropList: groupId (string) it its not required if this list shouldn't be connected
the group id can be used to connect different drop lists. (priDropLists will be connected if they have the same group id).

priDropListData: data object which will be in the (drop) event object

its recommended to use the list itself i.e.

<!--drop list-->
<div priDropList [priDropListData]="sourceList">
  <!--drag item-->
  <div *ngFor="let item in sourceList" priDragItem [priDragItemData]="item">Drag item</div>
</div>

priDropListConnectedTo: (PriDropList | string) | (PriDropList | string)[] alternative to the priDropList property
its possible to set an instance of another drop list as parameter
*in release i will combine the connectionTo possibility into one property (priDropListConnectedTo or in the priDropList) property
priDropAllowedWhen: (listData: any, itemData: any) => boolean
define a method to enable / disable drag and drop based on conditions for specific items
- listData => value of the priDropListData from the source list
- itemData => value of the priDragItemData from the drag item
priDropListSorting: (boolean) => default is "true"
enable / disable sorting for this drop list
priDropListDisabled: (boolean) enable / disable drop list
(priDropListDrop): PriDropEventArgs drop event
PriDropEventArgs
- sourceListData: priDropListData from the source list
- targetListData: priDropListData from the target list
- itemData: priDragItemData drag item data
- dropIndex: target list index

priDragItem

drag item. You do not have to use the drag item inside a priDropList.

priDragItemData: (any) drag item data
priDragItemDisabled: (boolean)
enable / disable drag item itself (prevents drag)

*priDragPlaceholder

*need to be a direct child of priDragItem* 
defines a placeholder in the priDropList for this drag item. (if this drag item is dragged inside a priDropList this placeholder will be shown)

currently not all cases are handled if there is a problem, use an empty div as placeholder

 <!--drag item-->
 <div priDragItem [priDragItemData]="abc">
  <span>My DragItem</span>
  <!--drag placeholder-->
  <div *priDragPlaceholder>...</div>
 </div>

*priDragPreview

*need to be a direct child of priDragItem*    
custom drag image (preview) -> you can define an element which will be rendered while dragging.

 <!--drag item-->
 <div priDragItem [priDragItemData]="abc">
  <span>My DragItem</span>
  <!--drag preview-->
   <div class="preview" style="background-color: lime;" *priDragPreview>Custom Preview</div>
 </div>