Angular 2+ Directive Based On HTML 5 Native Drag Drop API

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.

Related Posts

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…