Drag-and-drop events with JavaScript

Drag and drop is an useful web feature where an object is grabbed by the user and dropped to a different location on a web-page. HTML5 and JavaScript DOM level 3 has introduced event and attribute support for drag and drop of objects in webpage.

To make an HTML5 element supporting drag and drop events it has to be made draggable. That is achieved by using the attribute draggable.

Syntax to enable elements for drag-and-drop events

<img src=”image1.jpg” draggable=true>

dataTranfer object

Data transfer defines the type of data and value of data being dragged. The type of data can be text or url. Data transfer object has two methods, getData() and setData().

getData(“type of data”) – retrieves the value stored by setData().
setData(“type of data”, “data/link or id of data to be set”) – takes the type of data and data to be set as input parameters.

Example with JavaScript dataTransfer object

This example shows the ‘text’ data of id being dragged:

function drag(event){

event.dataTransfer.setData(”text”, event.target.id);

}

event.preventDefault() method

The event.preventDefault() method prevents the default handling of elements. By default, the elements cannot be dropped on other elements and calling this method allows the element to be dropped. The ‘drop’ event is not triggered when preventDefault() is not set.

Example with JavaScript event.preventDefault() method

var droptarget = document.getElementById(“div1”);

EventUtil.addHandler(droptarget, “dragover”, function(event){

EventUtil.preventDefault(event);

});

The DOM level 3 has introduced events which can be fired on an element when it is dragged and, when it is dropped. These events are listed below:

General events on draggable elements

ondragstart; This event is fired when the user begins to drag the object. The cursor changes to a no-drop symbol, a circle with a line through it indicating object is being dragged and cannot be dropped.
ondrag; This event continues to fire as long as object is being dragged.
ondragend; This event is fired, when dragging stops and the object is dropped at valid or invalid target position.

Events on elements when dropped or within the target

ondragenter; This event is fired when dragged element enters the target where it has to be dropped at.
ondragover; This event is fired immediately after ondragenter is fired and continues to fire while dragged element is within the boundaries of the target.
ondragleave; This event is fired when the element is out of the boundaries where it supposed to be dropped at.
ondrop; This event is fired when the element is dropped at the specified target.

Syntax for drag and drop events

In HTML:

<element ondragXXXX = “eventHandler()”>

In JavaScript:

object.ondragXXXX = function(){ eventHandler code };

In Javascript using addEventListener() method:

Object.addEventListener(“dragXXXX”, eventHandler);

In the example below, all the above events will be triggered. With this example, a text can be moved from one div to another div.

Example of JavaScript drag-and-drop events

<!DOCTYPE html>
<html>

<style>
  div{font-size:0.8em;line-height:1.6em;text-align:center;}
  	p{width:90%;margin:0px auto;padding:0.5em;}
</style>

<body>
	<br/>		
	<div id="div1" style="float:left; margin:10px; width:200px; height:50px; border: 1px solid black"> 
    	<p id="dragText" draggable="true">TEXT to DRAG</p>
	</div>
	<div id="div2" style="float:left; margin:10px; width:200px; height:50px; border: 1px solid black"> 
	</div>
	<br/><br/>	
	<p id="note"></p><br/>
	<script>
		/*Events on dragging*/
		document.addEventListener("dragstart", function(event){
			event.dataTransfer.setData("text", event.target.id);
			document.getElementById("note").innerHTML = "Drag started";
		});
		
		document.addEventListener("drag", function(event){				
			document.getElementById("div1").style.border = "1px solid red";						
		});
			
		document.addEventListener("dragend", function(event){				
			document.getElementById("div1").style.border = "1px solid black";	
			document.getElementById("div2").style.border = "1px solid black";	
			document.getElementById("note").innerHTML = "Drag ended";
		});
			
		/*Events on dropping*/
		document.addEventListener("dragenter", function(event){		
			document.getElementById("div2").style.border = "1px solid red";
			document.getElementById("note").innerHTML = "Drag entered to target";
		});
			
		/* Prevents default handling and allows the element to be dropped here.*/
		document.addEventListener("dragover", function(event){				
			event.preventDefault();
		});
			
		document.addEventListener("dragleave", function(event){				
			document.getElementById("div1").style.border = "1px solid black";
			document.getElementById("div2").style.border = "1px solid black";
			document.getElementById("note").innerHTML = "Drag is leaving div";
			document.getElementById("note").style.color = "red";
		});
			
		document.addEventListener("drop", function(event){	
			event.preventDefault();
			if((event.target.id == "div1") || (event.target.id == "div2" )){
				document.getElementById("div1").style.border = "1px solid black";
				document.getElementById("div2").style.border = "1px solid black";
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
		});
	</script>
</body>

</html>

›› go to examples ››