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 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.
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.
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.
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
http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
