The native drag-and-drop APIs

Drag-and-drop is a way to convert the pointing device's movements and clicks to special commands that are recognized by software to provide quick access to common functions of a program. The user grabs a virtual object, drags it to a different location or another virtual object, and drops it there. Drag-and-drop support for a native browser means faster, more responsive, and more intuitive web applications. Before you use the drag-and-drop feature, make sure you have draggable content.

Draggable content

An abstract Element class has a draggable attribute that indicates whether the element can be dragged and dropped. As all the DOM elements emerge from the Element abstract class, this means all of them support the drag-and-drop operation by default. To make elements draggable, we need to set their draggable attribute to true. This can be done using the following code:

var dragSource = querySelector("#sample_drag_id");
dnd.draggable = true;

Alternatively...