dragdrop is a simple Angular 2+ directive based on the native HTML 5 drag-and-drop API.

angular 2 drag and drop example, angular drag and drop without material, angularmaterial drag and drop codesandbox, angular material drag and drop save position

Drag and Drop Elements and Sort Lists | draganddrop.js

How to make use of it:

1. Just add drag directive.

<div drag >
    This div is now draggable
</div>

2. Just add routing and handle the dropped event.

<div drop (dropped)="onDropped($event)">
    This div is now draggable
</div>

3. To automatically insert the item into the group by dropping it, link it by dragging and dropping and grouping, and set the dropdown 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>

HTML5 Drag And Drop For Angular, dragdrop Plugin/Github

See Demo And Download

Official Website(ramyhhh): Click Here

This superior jQuery/javascript plugin is developed by ramyhhh. For extra advanced usage, please go to the official website.