HTML5 - SPLessons
boy2

HTML5 Drag and Drop

Home > Lesson > Chapter 24
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Drag and Drop

HTML5 Drag and Drop

shape Introduction

Present chapter demonstrates about HTML5 Drag and Drop. In order to use Drag and Drop in HTML4, JavaScript or other frame works have to be used.But in HTML5 feature of Drag and Drop API is provided by default. Following are the concepts covered.
  • Events
  • Process of HTML5 Drag and Drop

Events

shape Description

HTML5 have the number of events to perform the Drag and Drop. While performing use some events that listed below.
Events Description
dragstart The event get into action when the user performs dragging the object.
drag The event gets into action when the mouse drags the object.
drop The event gets into action when the event listener is responsible for inserting the dragged object.
dragend The event gets into action when mouse button releases the dragged object
dragenter The event gets into action when the mouse is moving over the targeted element while starting drag and listener is ready to drop the element or not of not drop action should not allows automatically.
dragover The event gets into action when the mouse is moving over the targeted element. During the event, drag enter will be same as drag enter event.
dragleave The event gets into action when the mouse leaves the element. Listener should remove any of the markers while dropping the feedback.
runtime_error Super class for some of the runtime error exceptions.
bad_exception Handles unexpected exceptions in C++.

Browser Support

shape Description

HTML5 Drag and Drop are supported by all the latest browsers.Following are the browser versions supported by HTML5.

Process of HTML5 Drag and Drop

shape Description

In order to do the drag and drop initially make an object as draggable and then drop the object as shown in the below process. Making as Draggable Object
  • In order to make an Object Draggable, set the draggable attribute as true for that object.
  • To store the dragged data set an event listener as dragstart.
  • Now the event listener will set the some operations like copy, move and link
The code below demonstrates the making an object as draggable. [html]<!DOCTYPE HTML> <html> <head> <style type="text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #0101DF; width:75px; height:75px; } #boxB { background-color: #FF00BF; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } </script> </head> <body> <h2>Drag and drop HTML5 demo</h2> <div>Try to drag the blue box around.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(ev)"> <p>Drag Me</p> </div> <div id="boxB">Dustbin</div> </center> </body> </html> [/html] Result By running the above code in a preferred browser, following output appears.
SPLessons

Process of HTML5 Drag and Drop

shape Description

After dragging user need to drop the element by using 3 elements as follows.
  • dragenter The event is used to check whether the drop target accepts the drag element or not, if the drop target accepts the event get cancelled.
  • dragover Used to show the feedback of the event based on the drop effect attribute value.
  • drop Used to perform the dropping operation.
The code below demonstrates how to drop an object into another object. [html]<!DOCTYPE HTML> <html> <head> <style type="text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px;-moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to move the purple box into the pink box.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(ev)"> <p>Drag Me</p> </div> <div id="boxB" ondragenter="return dragEnter(ev)" ondrop="return dragDrop(ev)" ondragover="return dragOver(ev)">Dustbin </div> </center> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.
SPLessons

Summary

shape Points

  • While dragging only drag events gets into action, mouse events are not performed.
  • HTML5 DnD API gives native Dnd support to the browser.
  • While dragging objects hold the data about DnD operation.
Hide Index Show Index
Chapter 24