Drag & Drop for Angular-based on HTML5 | ng-drag-drop

Drag and drop for Angular, based on HTML5 with no external dependencies. Provides drag and drop directions.

html5 drag and drop multiple elements, drag and drop library angular, drag and drop library react, javascript drag and drop example, drag and drop cards javascript


  • Transfer data from draggable to dropable.
  • Drop restriction based on drag and drop scopes.
  • Restrict drag to occur either from the drag handles or from the entire element.
  • Add custom checkout help image
  • Ability to add custom visual cue style patterns.

Super Easy to Set Up Drag and Drop with Vanilla Javascript | dragula.js

How to make use of it:


npm install ng-drag-drop --save

1. You need to import the NgDragDropModule into the module of your app where you want to use it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from "./components/demo-component";
import { NgDragDropModule } from 'ng-drag-drop';

  imports: [
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
export class AppModule {}

2. Place the retractable guide on an item that you want to be retractable. The following example makes the menu item draggable:

  <li draggable>Coffee</li>
  <li draggable>Tea</li>
  <li draggable>Milk</li>

3. Similarly, use the droppable directive on an element where you want to drop a droppable:

<div droppable>
  <p>Drop items here</p>


Draggable directive


NameTypeDefault ValueDescription
dragDataanynullThe data that will be available to the droppable directive on its onDrop() event.
dragClass (previously dragOverClass)string'drag-border'CSS class is applied on the draggable that is applied when the item is being dragged.
dragTransitClassstring'drag-transit'CSS class applied on the drag helper translucent element clone.
dragHandleClassstring'drag-handle'The CSS class applied to a draggable element. If a dragHandle is defined then it’s applied to that handle element only. By default, it is used to change the mouse over the pointer.
draghandlestringnullThe selector that defines the drag Handle. If defined drag will only be allowed if dragged from the selector element.
dragImagestringnullThe URL to the image will be used as a custom drag image when the draggable is being dragged.
dragEnabledbooleantrueDefines if drag is enabled. true by default.


onDragStarte: DOM eventEvent fired when Drag is started
onDrage: DOM eventEvent fired while the element is being dragged
onDragEnde: DOM eventEvent fired when dragged ends

For more information on Drag DOM Events: Drag Event

Droppable directive


NameTypeDefault ValueDescription
dragOverClassstring'drag-over-border'CSS class is applied on the droppable element when the item is being dragged over a valid drop target.
dragHintClassstring'drag-hint-border'CSS class is applied on this droppable when a compatible draggable item is being dragged. This can be used to visually show allowed drop zones.
dropEnabledbooleantrueDefines if the drop is enabled. true by default.


onDragEntere: DOM eventEvent fired when Drag dragged element enters a valid drop target.
onDragOvere: DOM eventEvent fired when an element is being dragged over a valid drop target.
onDragLeavee: DOM eventEvent fired when a dragged element leaves a valid drop target.
onDrope: DropEventEvent fired when an element is dropped on a valid drop target.

easy html5 drag and drop library, ng-drag-drop Plugin/Github

See Demo And Download

Official Website(ObaidUrRehman): Click Here

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

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…