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

drag and drop angular, angular 2 drag and drop example, drag and drop textbox in angular, draggable js examples, drag and drop library angularjs

Enable HTML5-Based Drag-and-Drop Functionality In The List of Items | jQuery DragNDrop

How to make use of it:

1. Add drag directive.

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

2. Add drop directive and handle a dropped event.

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

3. Categories are added and removed by default to the item being checked out, and the item being dragged over it.

[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; }

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.