Drag and Drop is supported through two libraries of Essential JS 2. Those are Draggable
and Droppable
. Draggable makes DOM to be dragged using mouse or touch gestures and Droppable mark required DOM as droppable zone.
You can make any element draggable by passing the element to Draggable constructor. Refer the following code snippet to enable draggable for DOM element.
import {Draggable} from '@syncfusion/ej2-base';
let dragElement: HTMLElement = document.getElementById('element1');
let draggable:Draggable = new Draggable(dragElement,{clone: false});
You can convert any DOM element as a droppable zone, which accepts the draggable elements. Refer the following code snippet to enable droppable zone.
import { Droppable} from '@syncfusion/ej2-base';
let droppable: Droppable = new Droppable(document.getElementById('droppable'));
To define drop action set drop
callback function during droppable object creation. You can get details of dropped element through dropped element property in event argument. Refer the following code snippet to use basic drag and drop action.
import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';
let draggable: Draggable = new Draggable(document.getElementById('element1'), {
clone: false
});
let droppable: Droppable = new Droppable(document.getElementById('droppable'), {
drop: (e: DropEventArgs) => {
e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
}
});
Define handle element for Draggable
Restricting Draggable within container
Visual feedback of draggable element
Accepting specific drag element in droppable