Drag and Drop

HTML5

HTML5 Examples

The Drag and Drop event is the well known properties of Html5. It is powerful User Interface concept which makes it easy to copy, move, reorder and deletion of objects with the help of mouse. It is supported by all the major browsers.

Drag and Drop Events

There are number of events which are required to create various stages of the drag and drop operation.

Event Description
dragstartScript to be run when the user starts dragging of the object.
dragenterScript to be run when the mouse is first moved over the target element while a drag is occurring. It indicate whether a drop is allowed over this location.
dragover Script to be run as dragenter most of the time.
dragleave Script to be run when the mouse leaves an element while a drag is occurring. It remove any highlighting or insertion markers used for drop feedback.
dragScript to be run every time the mouse is moved while the object is being dragged.
dropScript to be run on the element where the drop was occurred at the end of the drag operation. It would be responsible for retrieving the data being dragged and inserting it at the drop location.
dragend Script to be run when the user releases the mouse button while dragging an object.
<script>
	function allowDrop(ev) {
		ev.preventDefault();
	}

	function drag(ev) {
		ev.dataTransfer.setData("Text",ev.target.id);
	}
	
	function drop(ev) {
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
</script>

<div id="dv1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="dg1" src="image.png" draggable="true" ondragstart="drag(event)"/>