HTML5 – Drag and Drop Events

HTML5 Drag and Drop is used to move a image or text to another part of the screen using mouse device. In other words we can say, user selects object by grabbing it and dragging it to a different location. It makes easy to copy and deletion of items using mouse clicks. This allows moving mouse pointer over an object, holding down the left mouse button, dragging it to another location and releasing the button to drop the object there.

Drag and Drop Events

The following are the events which are used during drag and drop operation.

EventsDescriptionSyntax
dragstartIt is used when user starts dragging an element or text selection.
dragenterIt is used when a dragged element or text selection enters valid drop target.
dragoverIt is used when a dragged element or text selection is being dragged over a valid drop target.
dragleaveIt is used when dragged element or text selection leaves a valid drop target.
dragIt is used to move the object or image on the display screen.var myDragInstance=new Drag(el,[, options]);
dropit is used on the element where drop occurred at the end of the drag operation.var myDropInstance=new Drop(el,[, options]);
dragendIt is used when user releases mouse button while drag operation is being ended.

Example for Drag and Drop Element

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
	width: 350px;
	height: 100px;
	padding: 10px;
	border: 1px solid #aaaaaa;
	background:grey;
}
#div2 {
	width: 100px;
	height: 50px;
	padding: 10px;
	border: 1px solid #aaaaaa;
	background:red;
}
</style>
<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>
</head>
<body>

	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Drop Here</div>
	<br>
	<div id="div2" draggable="true" ondragstart="drag(event)">Drage Me</div>

</body>
</html>
  • allowDrop(ev) function is used to prevent the browser default handling of the data by calling  preventDefault().
  • drag(ev) function is used to move the object or image on the display screen.
  • drop(ev) function is used on the element where drop occurred at the end of the drag operation.
  • <div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”> tag uses ondrop which is used to move the object and ondragover is used when a dragged element or text selection is being dragged over a valid drop target.
  • <div id=”div2″ draggable=”true” ondragstart=”drag(event)”> uses draggable element to make an element draggable and ondragstart element is used when user starts dragging an element or text selection.

Example Application Test

  • Save the file as dragdrop_example.html in your system.
  • Just open the file in the browser, you will see the video playing in the browser. Note that the browser must support HTML5 specification.

Output

After successful execution of the program you will see following output.
html5_dragdrop1_

Now drag the element into the bigger rectangle and you would see a result as below:
html5_dragdrop1

 

Previous Tutorial : HTML5 Video and Audio Tags  :: Next Tutorial : HTML5 Aside Tag

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*