HTML5 Drag and Drop

Drag and Drop concept is very useful to create a graphical user interface.

  • Drag and Drop make user to copy, delete and reordering the items easier.
  • Drag and Drop help user to drag one item and drop at another place.
  • In HTML4 developers take javascript to enable the drag and drop feature.
  • HTML 5 Drag and Drop is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Example

Syntax :
<div id="div1" ondrop="drop(event)"
	ondragover="allowDrop(event)" >
<img src="htm.png" draggable="true"
	ondragstart="drag(event)"
 id="drag1" width="88" height="31"></div>
<div id="div2" align="center"ondrop="drop(event)"
	ondragover="allowDrop(event)"></div>
Output :
Drag the HTML5 logo into another box.
HTML view

Drag and Drop Events

EventsDescription
dragstartStart when the user start dragging the item.
dragenterExecute when the mouse is first moved over the target element while a drag is occuring.
dragoverThis event is execute as the mouse is moved over an element when a drag is occuring.
dragleaveThis event is execute when the mouse leaves an element while a drag is occuring.
dragExecutes every time the mouse is moved while the object is being dragged.
dropThe drop event is execute on the element where the drop was occured at the end of the drag operation.
dragendExecutes when the user releases the mouse button while dragging an object.

The DataTransfer Object

  • The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer.
  • The event.dataTransfer returns DataTransfer object associated with the event as follows:
    • function EnterHandler(event) {
    DataTransfer dt = event.dataTransfer;
    .............
}
  • The DataTransfer object holds data about the drag and drop operation.
  • This data can be retrieved and set in terms of various attributes associated with DataTransfer object as explained below:

    • S.N. DataTransfer attrobutes Description
    1 dataTransfer.dropEffect [ = value ] Returns the kind of operation that is currently selected. This attribute can be set, to change the selected operation. The possible values are none, copy, link, and move.
    2 dataTransfer.effectAllowed [ = value ] Returns the kinds of operations that are to be allowed. This attribute can be set, to change the allowed operations. The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
    3 dataTransfer.types Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".
    4 dataTransfer.clearData( [ format ] ) Removes the data of the specified formats. Removes all data if the argument is omitted.
    5 dataTransfer.setData(format, data) Adds the specified data.
    6 data = dataTransfer.getData(format) Returns the specified data. If there is no such data, returns the empty string.
    7 dataTransfer.files Returns a FileList of the files being dragged, if any.
    8 dataTransfer.setDragImage(element, x, y) Uses the given element to update the drag feedback, replacing any previously specified feedback.
    9 dataTransfer.addElement(element) Adds the given element to the list of elements used to render the drag feedback.

Drag and Drop Feature

  • Step 1: Making an Object Draggable
    1. If you want to drag an element, you need to set the draggable attribute to true for that element.
    2. Set an event listener for dragstart that stores the data being dragged.
    3. The event listener dragstart will set the allowed effects (copy, move, link, or some combination).

  • Step 2: Dropping the Object
    1. To accept a drop, the drop target has to listen to at least three events.
    2. The dragenter event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.
    3. The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value.