{"id":1705,"date":"2014-12-01T13:15:10","date_gmt":"2014-12-01T11:15:10","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1705"},"modified":"2018-06-20T16:48:21","modified_gmt":"2018-06-20T13:48:21","slug":"html5-drag-and-drop-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-drag-and-drop-example\/","title":{"rendered":"HTML5 Drag and Drop Example"},"content":{"rendered":"

Usability, an important part of web interface eases the way we communicate with web. Many new technologies and\u00a0functionalities are invented to ease the development effort as well as improve the overall way in which users interact with web. HTML5 has given many things as of today to improve the browser functionalities on client side with minimum amount of scripting. It\u00a0provides a great way to implement drag and drop functionality in modern browsers. We are going to see how it is implemented with a basic example of drag and drop in an image from one div to another.<\/p>\n

[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

To achieve drag and drop functionality with traditional HTML4, developers would have to use complex Javascript code. HTML 5 provides\u00a0a Drag and Drop API that brings support to the browser making it much easier to code up. No extra plugins needed to be installed. It is supported by the following major browsers:<\/p>\n

    \n
  1. Internet Explorer 9+<\/li>\n
  2. Firefox<\/li>\n
  3. Opera, Chrome<\/li>\n
  4. Safari<\/li>\n<\/ol>\n

    Note:<\/strong> Drag and drop does not work in Safari 5.1.7 and earlier versions.<\/p>\n

    1. Setting up two divs<\/h2>\n

    We will first code two create two div boxes. One div will contain the image to be dragged. The other div will be the destination where the image needs to be dragged.<\/p>\n

    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <style>\r\n        #div1, #div2\r\n        {float:left; width:280px; height:180px; margin:10px;padding:10px;border:1px solid #aaaaaa;}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id="div1">\r\n <img src="drag.png" width="250" height="150" id="drag1">\r\n<\/div>\r\n\r\n<div id="div2"><\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    Output for above code is two div boxes with one div box containing our image<\/p>\n
    \"1<\/a>
    Initial divs<\/figcaption><\/figure>\n
    2. Make the elements draggable<\/h2>\n
    Now, we need to first make the image draggable. Set the attribute \"draggable = true\"<\/code><\/p>\n
    \r\n<div id="div1">\r\n<img src="drag.png" draggable="true" width="250" height="150" id="drag1">\r\n<\/div>\r\n<\/pre>\n
    3. Set up events to handle drag functionality<\/h2>\n
    Set the ondragstart<\/code> event in the img<\/code> tag to call dragInitiliaze()<\/code> function as follows :<\/p>\n
    \r\n<img src="drag.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1">\r\n<\/pre>\n
    The ondragstart<\/code> event in img<\/code> tag detects when the drag is initialized\u00a0and then it calls the dragInitiate()<\/code> function. The dragInitiate()<\/code> function, then\u00a0catches the event. It sets the effectAllowed<\/code> value to “move”\u00a0and has\u00a0dataTransfer.setData()<\/code> method which sets the data type and the value of the dragged data.<\/p>\n
    \r\n\r\n<script type="text\/javascript">\r\n\r\nfunction dragInitialize(ev) {\r\nev.dataTransfer.effectAllowed='move';\r\nev.dataTransfer.setData("Text", ev.target.getAttribute('id'));\r\nreturn true;\r\n}\r\n\r\n<\/script>\r\n\r\n<!-- In body add the following draggable attributes to first div -->\r\n\r\n<div id="div1" >\r\n<img src="drag.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1">\r\n<\/div>\r\n\r\n<\/pre>\n
    \"2<\/a>
    Dragging Image from one div to other<\/figcaption><\/figure>\n
    4. Completing the drop and putting it all together<\/h2>\n
    By default, the elements that are set to be draggable<\/code> cannot be dropped in any other elements. The drop functionality needs to be handled by events provided by Drag-and-Drop API. We have to take care of following things :<\/p>\n
    \r\n\r\nfunction allowDropStatus(ev) {\r\nev.preventDefault();\r\nreturn false;\r\n}\r\n\r\nfunction dropComplete(ev) {\r\nev.preventDefault();\r\nvar src = ev.dataTransfer.getData("Text");\r\nev.target.appendChild(document.getElementById(src));\r\nev.stopPropagation();\r\nreturn false;\r\n}\r\n\r\n<!-- Modify the 2nd div to accept the drop -->\r\n\r\n<div id="div2" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"><\/div>\r\n<\/pre>\n
      \n
    1. \u00a0The div should listen to drop event so that it can accept the drop and place the image in its destination.<\/li>\n
    2. ondragover<\/code> listener event is fired whenever a dragged image is over the destination div<\/li>\n
    3. allowDropStatus()<\/code> prevents the default browser action so that we can code and handle the drop functionality.<\/li>\n
    4. dropComplete()<\/code> function\u00a0does following three tasks :<\/li>\n<\/ol>\n