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
Features:
- 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:
Installation:
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';
@NgModule({
imports: [
BrowserModule,
NgDragDropModule.forRoot()
],
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:
<ul> <li draggable>Coffee</li> <li draggable>Tea</li> <li draggable>Milk</li> </ul>
3. Similarly, use the droppable directive on an element where you want to drop a droppable:
<div droppable> <p>Drop items here</p> </div>
API Doc
Draggable directive
Attributes
| Name | Type | Default Value | Description |
|---|---|---|---|
dragData | any | null | The data that will be available to the droppable directive on its onDrop() event. |
dragScope | `string | Array` | 'default' |
dragClass (previously dragOverClass) | string | 'drag-border' | CSS class is applied on the draggable that is applied when the item is being dragged. |
dragTransitClass | string | 'drag-transit' | CSS class applied on the drag helper translucent element clone. |
dragHandleClass | string | '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. |
draghandle | string | null | The selector that defines the drag Handle. If defined drag will only be allowed if dragged from the selector element. |
dragImage | string | null | The URL to the image will be used as a custom drag image when the draggable is being dragged. |
dragEnabled | boolean | true | Defines if drag is enabled. true by default. |
Events
| Name | Parameters | Description |
|---|---|---|
onDragStart | e: DOM event | Event fired when Drag is started |
onDrag | e: DOM event | Event fired while the element is being dragged |
onDragEnd | e: DOM event | Event fired when dragged ends |
For more information on Drag DOM Events: Drag Event
Droppable directive
Attributes
| Name | Type | Default Value | Description |
|---|---|---|---|
dropScope | `string | Array` | 'default' |
dragOverClass | string | 'drag-over-border' | CSS class is applied on the droppable element when the item is being dragged over a valid drop target. |
dragHintClass | string | '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. |
dropEnabled | boolean | true | Defines if the drop is enabled. true by default. |
Events
| Name | Parameters | Description |
|---|---|---|
onDragEnter | e: DOM event | Event fired when Drag dragged element enters a valid drop target. |
onDragOver | e: DOM event | Event fired when an element is being dragged over a valid drop target. |
onDragLeave | e: DOM event | Event fired when a dragged element leaves a valid drop target. |
onDrop | e: DropEvent | Event 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.
