HTML5 Drag and Drop
The HTML5 has native support for the drag and drop feature.
Drag and Drop an Element
The HTML5 drag and drop feature allows the user to drag and drop an element to another location. The drop location may be a different application. While dragging an element a translucent representation of the element is follow the mouse pointer.
ExampleTry this code »
<title>HTML5 Drag & Drop</title>
// Sets the operation allowed for a drag source
e.dataTransfer.effectAllowed = "move";
// Sets the value and type of the dragged data
// Prevent the browser default handling of the data
// Cancel this event for everyone else
// Retrieve the dragged data by type
var data = e.dataTransfer.getData("Text");
// Append image to the drop box
border: 5px dashed gray;
margin: 20px 0;
<h2>Drag & Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped image will be inserted here-->
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
Tip: You can make an element draggable by setting the draggable attribute to true, like
draggable="true". However, in most browsers, text selections, images, and anchor elements with an
href attribute are draggable by default.
Drag and Drop Events
A number of events are fired during the various stages of the drag and drop operation. But mouse events such as mousemove are not fired during a drag operation. The following table provides you a brief overview of all the drag and drop events.
||Fires when the user starts dragging an element|
||Fires when a draggable element is first moved into a drop listener|
||Fires when the user drags an element over a drop listener|
||Fires when the user drags an element out of drop listener|
||Fires when the user drags an element anywhere; fires constantly but can give X and Y coordinates of the mouse cursor|
||Fires when the user drops an element into a drop listener successfully|
||Fires when the drag action is complete, whether it was successful or not. This event is not fired when dragging a file to the browser from the desktop.|
Note: The HTML5's drag and drop feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 9+.