Scribd
Upload
54 views

HTML5 Drag and Drop

Drag and drop events include ondragstart, ondragenter, ondragover, ondragleave, ondrag, ondrop, and ondragend. To make an element draggable, set its draggable attribute to true. The ondragstart event specifies the dragged data using setData(). The ondragover event allows dropping via preventDefault(). The ondrop event retrieves the data and appends the element into the target using getData() and appendChild().

Uploaded by

devendra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views

HTML5 Drag and Drop

Drag and drop events include ondragstart, ondragenter, ondragover, ondragleave, ondrag, ondrop, and ondragend. To make an element draggable, set its draggable attribute to true. The ondragstart event specifies the dragged data using setData(). The ondragover event allows dropping via preventDefault(). The ondrop event retrieves the data and appends the element into the target using getData() and appendChild().

Uploaded by

devendra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML5 - Drag & drop

Drag and Drop Events

A number of events are fired during the various stages of the drag and
drop operation. But mouse events such as mousemove are not fired
during a drag operation.

The following table provides you a brief overview of all the drag and
drop events.

Event Description
ondragstart Fires when the user starts dragging an element.
ondragenter Fires when a draggable element is first moved into a drop listener.
ondragover Fires when the user drags an element over a drop listener.
ondragleave Fires when the user drags an element out of drop listener.
ondrag Fires when the user drags an element anywhere; fires constantly
but can give X and Y coordinates of the mouse cursor.
ondrop Fires when the user drops an element into a drop listener
successfully.
ondragend Fires when the drag action is complete, whether it was successful
or not. This event is not fired when dragging a file to the browser
from the desktop.

Note: The HTML5's drag and drop feature is supported in all major


modern browsers like Firefox, Chrome, Opera, Safari and Internet
Explorer 9 and above.
Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to


true:

<img draggable="true">
What to Drag - ondragstart and setData()

Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function,


drag(event), that specifies what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of


the dragged data:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

In this case, the data type is "text" and the value is the id of the
draggable element ("drag1").

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow


a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the


ondragover event:

event.preventDefault()
Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Code explained:

 Call preventDefault() to prevent the browser default handling of


the data (default is open as link on drop)
 Get the dragged data with the dataTransfer.getData() method. This
method will return any data that was set to the same type in the
setData() method
 The dragged data is the id of the dragged element ("drag1")
 Append the dragged element into the drop element

You might also like