Press "Enter" to skip to content

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

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

NameTypeDefault ValueDescription
dragDataanynullThe data that will be available to the droppable directive on its onDrop() event.
dragScope`stringArray`'default'
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.

Events

NameParametersDescription
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

Attributes

NameTypeDefault ValueDescription
dropScope`stringArray`'default'
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.

Events

NameParametersDescription
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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.