HTML5 Drag and Drop
Introduction to Drag and Drop
- The drag and drop is a very common feature.
- It helps you in grabbing an object and dragging it to a different location.
- It is a common standard of HTML5 and any of the elements can be draggable.
- It makes it easier to copy, reorder and delete the items with the help of mouse clicks.
Drag and Drop Events
There are a number of events that are fired at various stages. Some of the events are as follows:
| Events | Description |
|---|
| dragstart | It will fire when the user starts dragging the object. |
| dragenter | It will fire when the mouse is first moved over the target element while a drag is occurring. If there is a listener then it should indicate if a drop is allowed and if they are not available then the drop should be default. |
| dragover | It fires as the mouse moves over an element when the drag is occurring. |
| dragleave | It fires as the mouse leaves an element when a drag is occurring. |
| drag | This event is fired when the mouse is moved while the object is being dragged. |
| drop | It will be fired only on the element where the drop has occurred at the end of the drag operation. It is the responsibility of the listener for retrieving the data that is dragged and inserted at the drop location. |
| dragend | It is fired when the user releases the mouse button while dragging an object. |
Data Transfer Object
The event listener accepts an Event object which has a
readonly attribute called
dataTransfer.
Syntax:
function EnterHandler(event)
{
DataTransfer dt = event.dataTransfer;
.................
}
The various attributes associated with the DataTransfer object are as follows:
a) dataTransfer.dropEffect [=value]- This attribute will return the kind of operation which is currently being selected.
- It is the attribute which is set to change the selected operation.
- Possible values can be none, copy, link and move.
b) dataTransfer.effectAllowed[=value]- The kinds of operations that are allowed will be returned.
- For changing the operations that are allowed this attribute is used.
- The values can be none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
c) dataTransfer.types : A DOMStringList will return by listing the formats that are set in the dragstart event. If any of the files are dragged then the type will be the string “Files”.
d) dataTransfer.clearData([format]) : The data of the specified formats is removed and all the data of the argument is omitted.
e) dataTransfer.setData(format, data) : The specified data is added.
f) data=dataTransfer.getData(format) : The specified data is returned. If there is no data then an empty string is returned.
g) dataTransfer.files : If there are any FileList of the files that are being dragged, they are returned.
h) dataTransfer.setDragImage(element, x, y) : The given elements are used for updating the drag feedback replacing any of the previous specified feedback.
i) dataTransfer.addElement(element) : The given elements are added to the list of the elements that are used to render the drag feedback.
Example : Demonstrating a simple drag and drop of an image
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:3px solid red;}
</style>
<script>
function allowingtoDrop(ev)
{
ev.preventDefault();
}
function dragging(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function dropping(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropping(event)" ondragover="allowingtoDrop(event)"></div>
<br>
<img id="drag1" src="dragme.png" draggable="true" ondragstart="dragging(event)" width="300" height="69">
</body>
</html>
The following is the output after dragging the image in the box.
