Introduction
With the browser becoming an increasing focal point for user interaction with the PC, having desktop-like features in a browser is the natural progression of user experience. On the desktop mode, users are used to having the drag and drop capability. Modern browsers are increasing allowing users to use them in the same way as desktop application – including support for drag and drop.
The actions on the browser for drag and drop operation can vary depending on the input mechanism – mouse, keyboard or touch. Hence, the HTML5 specification does not dictate what event constitutes a drag operation.
The HTML5 specification says…
The HTML5 specification specifies that an element can be made draggable by
– specifiying “draggable” attribute for the element, and
– Setting a listener for “dragstart” event which stores the data being dragged.
The data can be stored in the DataTransfer object.
The HTML5 specifies specifies that an element can be made drop target if it listens to three events:
– “dragenter”, which determines whether the drop target can accept the drop, by cancelling the event.
– “dragover “, which determines the feedback to be shown to the user. If the event is cancelled, the dropEffect attribute’s value is used.
– “drop”, which allows the drop to be performed. This event needs to be cancelled.
Hands On
Let us look at a simple example which demonstrates drag and drop API.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Drag and drop API demo</h1>
<p>Demo showing drag and drop in action</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
<p>Select your value below</p>
<ol ondragstart=”dragStartHandler(event)” ondragend=”dragEndHandler(event)”>
<li draggable=”true” data-value=”test-value1″>value1</li>
<li draggable=”true” data-value=”test-value2″>value2</li>
<li draggable=”true” data-value=”test-value3″>value3</li>
</ol>
<script>
var internalDNDType = ‘text/x-dragdrop’; // set this to something specific to your site
function dragStartHandler(event) {
if (event.target instanceof HTMLLIElement) {
// use the element’s data-value=”” attribute as the value to be moving:
event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
event.effectAllowed = ‘move’; // only allow moves
} else {
event.preventDefault(); // don’t allow selection to be dragged
}
}
function dragEndHandler(event) {
// remove the dragged element
event.target.parentNode.removeChild(event.target);
}
</script>
<p>Drop your values below:</p>
<button id=”Button”
ondragenter=”dragEnterHandler(event)”
ondragover=”dragOverHandler(event)”
ondrop=”dropHandler(event)”>
Drop here
</button>
<script>
var internalDNDType = ‘text/x-dragdrop’; // set this to something specific to your site
function dragEnterHandler(event) {
// cancel the event if the drag contains data of our type
if (event.dataTransfer.types.contains(internalDNDType))
event.preventDefault();
}
function dragOverHandler(event) {
event.dataTransfer.dropEffect = ‘move’;
event.preventDefault();
}
function dropHandler(event) {
// drop the data
var li = document.createElement(‘li’);
var data = event.dataTransfer.getData(internalDNDType);
if (data == ‘test-value1’) {
li.textContent = ‘value1’;
} else if (data == ‘test-value2’) {
li.textContent = ‘value2’;
} else if (data == ‘test-value3’) {
li.textContent = ‘value3’;
} else {
li.textContent = ‘Unknown value’;
}
event.target.parentNode.appendChild(li);
}
</script>
</body>
</html>?
In the above code snippet, we setup the listitems in the ordered list as draggable.
<ol ondragstart=”dragStartHandler(event)” ondragend=”dragEndHandler(event)”>
<li draggable=”true” data-value=”test-value1″>value1</li>
<li draggable=”true” data-value=”test-value2″>value2</li>
<li draggable=”true” data-value=”test-value3″>value3</li>
</ol>
Additionally, we have wired up listening to events ondragstart and ondragend – the implementation is shown above.
Next, we have the button element as a drop target (it implements the three events – ondragcenter, ondragover and ondrop.
<button id=”Button”
ondragenter=”dragEnterHandler(event)”
ondragover=”dragOverHandler(event)”
ondrop=”dropHandler(event)”>
Drop here
</button>
When the above HTML is rendered in a modern browser (latest version of Google Chrome and Firefox), you can experience the drag and drop behavior.
Summary
In this article, we learned how to build a simple web page which supports drag and drop functionality. I hope you have found this information useful.
About the Author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
References
http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html
