pri-ng-dragdrop
v0.1.4
Published
Drag and drop implementation for nested lists, with sorting
Downloads
8
Readme
This is currently an alpha version, and will be polished and released soon!
Drag and drop for nested lists.
Table of Contents
Angular
More
Installation
NPM
npm install --save pri-ng-dragdrop @angular/cdkUsage
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>priDragHandle
defines a drag handle for a drag item. The drag handle is used by the first parten priDragItem (its not required to be a direct child of priDragItem)
priDropListGroup
combines all sub drop lists. (if you use this directive on the same element as a priDropList the priDropList will be in this group aswell)
[priDropListGroupDisabled]: disables all drop lists in this group
(priDropListGroupDrop): gets all drop events from nested priDropList's
priDropZone
this is currently under development important cases are not implemented right now
simple drop zone which allows you to drop priDragItems. (priDropZone) doens't allow sorting etc.
Issues
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Planned
- polish the library and create a prop. release
Author
- Mario Prieschl Github