Firstly, to enable an element to be draggable, set the draggable attribute to true:
| <img draggable=“true”> |
Next, define what action should occur when the element is being dragged.
In the example above, the ondragstart attribute invokes a function, drag(event), which determines the data to be dragged.
Using dataTransfer.setData() method establishes both the data type and the value of the data being dragged.
| function drag(ev) { ev.dataTransfer.setData(“text”, ev.target.id); } |
In this instance, the data type is set to “text” and the value is the id of the draggable element (“drag1”).