{"id":1458,"date":"2016-06-08T18:35:04","date_gmt":"2016-06-08T18:35:04","guid":{"rendered":"http:\/\/www.capitalnumbers.com\/blog\/?p=1458"},"modified":"2025-08-11T11:35:09","modified_gmt":"2025-08-11T11:35:09","slug":"what-you-should-know-about-html5-drag-and-drop","status":"publish","type":"post","link":"https:\/\/www.capitalnumbers.com\/blog\/what-you-should-know-about-html5-drag-and-drop\/","title":{"rendered":"What You Should Know About HTML5 Drag and Drop"},"content":{"rendered":"<p><!--<span style=\"font-weight: 400;\"><a href=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/HTML5-Drag-and-Drop-1.jpg\"><img class=\"aligncenter size-full wp-image-1462\" src=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/HTML5-Drag-and-Drop-1.jpg\" alt=\"HTML5 Drag and Drop (1)\" width=\"1000\" height=\"600\" srcset=\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/HTML5-Drag-and-Drop-1.jpg 1000w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/HTML5-Drag-and-Drop-1-300x180.jpg 300w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/HTML5-Drag-and-Drop-1-768x461.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/span>--><\/p>\n<p><span style=\"font-weight: 400;\">The drag and drop feature is one of the interactions that can promote usability of your website. There are numerous frameworks that can be used to develop the drag and drop interfaces. However, what most web developers don\u2019t understand is that all the modern web browsers\u2014that supports HTML5\u2014 have native supports that can implement drag and drop. <\/span><\/p>\n<p><strong><span style=\"font-weight: 400;\"> In \u201cWhat You Should Know about HTML5 Drag and Drop\u201d we explore how to make use of HTML5 drag and drop during web development. Let\u2019s get started.<\/span><\/strong><\/p>\n<h6><span style=\"color: #000080;\"><b>How to make HTML5 elements draggable<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">To make HTML5 elements draggable, we use the draggable attribute. When the draggable attribute set to true value, the browser will automatically tell that the element is draggable. Here\u2019s an example:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;div draggable=\u201ctrue\u201d&gt;<\/span>\nthis is an instance of draggable Division&lt;\/div&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">The above HTML5 code tells the browser that whatever element is placed between the &lt;DIV&gt; and &lt;\/DIV&gt; tags can be dragged and dropped. <\/span><\/p>\n<p><strong><span style=\"font-weight: 400;\">Some HTML elements such as the &lt;A&gt; and &lt;IMG&gt; are draggable by default in most browsers. However, it\u2019s a good practice to explicitly specify whether the element is draggable or not.<\/span><\/strong><\/p>\n<h6><span style=\"color: #000080;\"><b>Which events are started during the drag and drop interactions?<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">Well, a couple of events will be initiated by the browser during a drag interaction. Some of the events will be initiated on the HTML element that is being dragged while others will be fired on HTML elements that on the web page that serves as the drop targets. Below are examples of events that are fired up during the dragging process:<\/span><\/p>\n<p>* <strong><em>dragstart<\/em><\/strong>. it\u2019s started on an HTML element by the user. It can\u2019t be initiated when dragging a file into the browser.<br \/>\n*<strong><em> drag<\/em><\/strong>. It is continuously started on the element that\u2019s being dragged during the interaction.<br \/>\n* <em><strong>dragenter<\/strong><\/em>. It\u2019s fired the moment the dragged element enters the target element.<br \/>\n* <em><strong>dragleave<\/strong><\/em>. It\u2019s fired the moment the dragged element leaves the target element.<br \/>\n* <em><strong>drop<\/strong><\/em>. It is fired when the dragged HTML element or file is dropped.<br \/>\n* <em><strong>dragend<\/strong><\/em>. It\u2019s started when the moment the drag interaction has been completed.<\/p>\n<div id=\"om-b7tfondceubrbvku-holder\"><\/div>\n<p><script>\/\/ <![CDATA[\nvar b7tfondceubrbvku,b7tfondceubrbvku_poll=function(){var r=0;return function(n,l){clearInterval(r),r=setInterval(n,l)}}();!function(e,t,n){if(e.getElementById(n)){b7tfondceubrbvku_poll(function(){if(window['om_loaded']){if(!b7tfondceubrbvku){b7tfondceubrbvku=new OptinMonsterApp();return b7tfondceubrbvku.init({u:\"18402.328170\",staging:0,dev:0,beta:0});}}},25);return;}var d=false,o=e.createElement(t);o.id=n,o.src=\"\/\/a.optnmnstr.com\/app\/js\/api.min.js\",o.onload=o.onreadystatechange=function(){if(!d){if(!this.readyState||this.readyState===\"loaded\"||this.readyState===\"complete\"){try{d=om_loaded=true;b7tfondceubrbvku=new OptinMonsterApp();b7tfondceubrbvku.init({u:\"18402.328170\",staging:0,dev:0,beta:0});o.onload=o.onreadystatechange=null;}catch(t){}}}};(document.getElementsByTagName(\"head\")[0]||document.documentElement).appendChild(o)}(document,\"script\",\"omapi-script\");\/\/ ]]><\/script><!-- \/ OptinMonster --><\/p>\n<h6><span style=\"color: #000080;\"><b>Properties of the Data Transfer Object<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">The drag interaction generates a data transfer object that\u2019s used to store all the information about the drag interaction. Here\u2019s what you should know concerning properties of the data transfer object:<\/span><\/p>\n<p>* <em><strong>DropEffect<\/strong><\/em>. This property is used to determine which cursor the browser should display when dragging. Its possible values are: copy, move and link.<br \/>\ndataTransfer.dropEffect [ = value ]<br \/>\n* <em><strong>EffectAllowed<\/strong><\/em>. It assumes the following values: copy, move, link and copyLink. It indicates which types are allowed for the drag interaction.<br \/>\ndataTransfer.effectAllowed [ = value ]<br \/>\n* <em><strong>Files<\/strong><\/em>. It defines the file objects that are associated with the dragging process.<br \/>\ndataTransfer.files<br \/>\n* <em><strong>Types<\/strong><\/em>. It defines the format types for the data which is stored in the DataTransfer object.<br \/>\ndataTransfer.types<\/p>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve learnt the basic requirements for drag and drop interaction in HTML5, let\u2019s see a quick process in action.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Copy and paste the HTML5 code below in your favorite editor. Save as \u201c.html\u201d file and open it in your browser. <\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;! DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;title&gt;&lt;\/title&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0#source, #source1, #source2 {color: blue;}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0#target {border: 1px solid black; padding: 2em;}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\n\n<span style=\"font-weight: 400;\">function dragstart_handler(ev) {<\/span>\n\n<span style=\"font-weight: 400;\"> ev.dataTransfer.setData(\"text\", ev.target.id);<\/span>\n<span style=\"font-weight: 400;\"> ev.dataTransfer.effectAllowed = \"move\";<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">function drop_handler(ev) {<\/span>\n\n<span style=\"font-weight: 400;\"> ev.preventDefault();<\/span>\n<span style=\"font-weight: 400;\"> var data = ev.dataTransfer.getData(\"text\");<\/span>\n<span style=\"font-weight: 400;\"> ev.target.appendChild(document.getElementById(data));<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">function dragover_handler(ev) {<\/span>\n\n<span style=\"font-weight: 400;\"> ev.preventDefault();<\/span>\n<span style=\"font-weight: 400;\"> ev.dataTransfer.dropEffect = \"move\"<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"source\" ondragstart=\"dragstart_handler(event);\" draggable=\"true\"&gt;Fruits&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div id=\"source1\" ondragstart=\"dragstart_handler(event);\" draggable=\"auto\"&gt;Alcohol&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div id=\"source2\" ondragstart=\"dragstart_handler(event);\" draggable=\"false\"&gt;Foods&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"target\" ondrop=\"drop_handler(event);\" ondragover=\"dragover_handler(event);\"&gt;<\/span><span style=\"font-weight: 400;\">Drop all your elements here<\/span><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Try to drag and drop the elements. What do you see? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">By putting into practice all that we\u2019ve learnt today, you should be in a position to develop your own drag and drop in HTML5. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The drag and drop feature is one of the interactions that can promote usability of your website. There are numerous frameworks that can be used to develop the drag and drop interfaces. However, what most web developers don\u2019t understand is that all the modern web browsers\u2014that supports HTML5\u2014 have native supports that can implement drag &#8230;<\/p>\n","protected":false},"author":12,"featured_media":1462,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[723,743],"tags":[1054],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1458"}],"collection":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/comments?post=1458"}],"version-history":[{"count":4,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":16334,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1458\/revisions\/16334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media\/1462"}],"wp:attachment":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media?parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/categories?post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/tags?post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}