A simple angular 2+ directive based on HTML 5 native drag drop API
Please check the project page https://codesandbox.io/s/github/ramyhhh/angular-dragdrop
Just add drag directive
<div drag >
This div is now draggable
</div>
Just add drop directive, and handle dropped event
<div drop (dropped)="onDropped($event)">
This div is now draggable
</div>
It is useful to wrap objects inside the drag drop event and help in working the application state, and understand how it is connected to the drag drop behaviour. Just bind the the drag directive with the targeted object, additional you can transfer another object by binding into drag-collection You can also bind to the drop directive and the drop-collection as well
<div *ngFor="let item of items" [drag]="item" [drag-collection]="items" >{{item.name}}</div>
It's not recommended to allow state to be mutatid in this fation, but sometimes being lazy is being happy, to automaticly remove item from array. To do that just bind the item to the drag directive and, bind the array that you want to manipulate to drag-collection directive, and set drag-out to true. This will cause the item to be remved from the collection when dragged out.
<div *ngFor="let item of items" [drag]="item" [drag-collection]="items" drag-out="true" >{{item.name}}</div>
To automaticly insert item to collection by dropping it in, bind to drag and drop and drop-collection and set drop-in to true
<div *ngFor="let item of items" [drag]="item" [drag-collection]="items" drag-out="true" >{{item.name}}</div>
<div *ngFor="let item of items" [drop]="item" [drop-collection]="items" drop-in="true" >{{item.name}}</div>
Just bind the drag and drop directives together, and the respictive collections:
<div *ngFor="let item of items"
[drag]="item" [drag-collection]="items" drag-out="true"
[drop]="item" [drop-collection]="items" drop-in="true" >
{{item.name}}
</div>
You can bind to drag-tag and check the tag from within the drag drop event, which is very usefull in telling the drop handler extra information about the drag source.
<div *ngFor="let item of items" [drag]="item" drag-tag="tag" >{{item.name}}</div>
Imagine you have a drop target and many drag sources in your application page, the drop target supposed only to accept certain items to be dropped in, in order for the drop target to tell what item being dropped the tag is the best way to do it. Of course you can check for specific properties or types of the item being dropped, but sometimes it's the same item same type but just a different drag source.
Classes are added and removed by default to element being dragged, and element being dragged over, the follwing style will make it clear
[drag],[ng-reflect-drag] {
cursor: pointer;
}
[drop],[ng-reflect-drop] {
border: solid 1px #ccc;
padding: 10px;
}
.dragging { opacity: 0.5; border: dotted 2px #ccc }
.drag-over { border: dashed 2px #ccc; }
Just set drop-files to tru
<div drop drop-files="true" (dropped)="onDrop($event)">
DROP ANYTHING HERE
</div>
Go to project page [https://codesandbox.io/s/github/ramyhhh/angular-dragdrop], and copy dd.ts to your project, and make sure to declare the directives within you ngModule. Just set drop-files to tru
@NgModule({
declarations: [...,DragDirective,DropDirective]
})
and that's it , sorry for not packing with npm, maybe later :)