Drag and drop is a user interface for transferring data between a “drag source” and “drop target” that may be in the same application or in different applications. Any document element that has the HTML draggable attribute is a drag source and the element where the HTML element dropped is drop target. In other words, drag and drop allow the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. These techniques allow elements to be dragged and “dropped” within a web page or other.
Here is a simple example of a drag and drop event, where the text can be dragged into a textbox.
You can use the following HTML code to display this example of drag and drop event.
<span draggable="true">Drag This text on Textbox</span>
<input type="text" />
Drag and drop operations are performed in different steps, the first of them is to set HTML elements attribute draggable. Only after setting elements attribute draggable browser allows you to drag any elements. You can make HTML elements draggable with adding attribute [draggable=”true”] as the following.
<div draggable="true">This text is draggable</div
Different Drag and Drop Events
A number of events are fired during various stages of the drag and drop operation. When the user begins a mouse drag over a drag source, the browser fires a dragstart event on the element instead of selecting the element content. After that drag event fires on the element continuously while dragging element then fired drop event while dropping on drop target. The different events fired during drag and drop operation on an element are given below.
This event is fired on an element when a drag is started. The event handler for dragstart event should call dataTransfer.setData() to specify the data that the drag source is making available. You can also set dataTransfer.effectAllowed to specify which of the “move”, “copy” and “link” transfer operations are supported and you can also call dataTransfer.setDragImage() to specify an image or document element to be used as the visual representation of the drag.
var icon=new Image();
dt.setData("text/plain", "The Time is : "+clock.innerHTML+" Now.");
While the drag progresses, the browser fires drag events on the drag source. You can add event handlers, if you want to update the drag image or alter the data being set, but it is not generally to register drag event handlers.
This event is fired when the mouse enters an element while a drag is occurring.
This event is fired each time the mouse pointer moves as it moves across an element when a drag is occurring.
This event is fired when the mouse leaves an element while a drag is occurring.
This event is fired at the source of the drag when the drag operation is complete.
Drop event is fired after dragend event is fired. If the drag source supports a “move” operation, should check dataTransfer.dropEffect to see if a move operation was actually performed. You can also use getData method to retrieve the data again.
Example Of Handling Drag and Drop Events
Here is another example of drag and drop event, where the list items of unordered list can be dragged and dropped into another box.
- First Item
- Second Item
- Third Item
- Fourth Item