YouTip![Event Object Reference Manual]()
Event Object
Example
Execute JavaScript when a draggable element is dropped onto a <div> element:
More examples are included at the bottom of this page.
Definition and Usage
The ondrop event occurs when a draggable element or selected text is dropped in a drop target.
Drag and drop is a very common feature in HTML5. For more information, see the HTML5 Drag and Drop section in our HTML tutorial.
Note: To make an element draggable, you need to use the HTML5 draggable attribute.
Tip: Links and images are draggable by default, without the draggable attribute.
During the drag and drop process, the following events are triggered:
- Events triggered on the drag source:
- ondragstart - Triggered when the user starts dragging an element
- ondrag - Triggered when an element is being dragged
- ondragend - Triggered when the user finishes dragging an element
- Events triggered when releasing the target:
- ondragenter - Triggered when the object being dragged enters its container area
- ondragover - Triggered when a dragged object is moved within another object's container area
- ondragleave - Triggered when the object being dragged leaves its container area
- ondrop - Triggered when the mouse button is released during a drag operation
Browser Support
Note: The ondragover event is triggered every 350 milliseconds while dragging an element.
| Event | |||||
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
In HTML:
<element ondrop="myScript"> Try it
In JavaScript:
object.ondrop=function(){myScript}; Try it
In JavaScript, using the addEventListener() method:
object.addEventListener("drop", myScript); Try it
Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
More Examples
Example
The following example demonstrates all drag and drop events:
/* Triggers when dragging */
document.addEventListener("dragstart", function(event) {
//dataTransfer.setData() method sets data type and dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging p element
document.getElementById("demo").innerHTML = "Started dragging p element.";
// Modify the opacity of the dragged element
event.target.style.opacity = "0.4";
});
// Change output text color while dragging p element
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text after finishing dragging p element and reset opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging p element";
event.target.style.opacity = "1";
});
/* Triggers after dragging is completed */
// Change div border style when p element completes dragging into droptarget
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dragged and dropped in other elements. For drop we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Reset div border style when draggable p element leaves droptarget
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* For drop, prevent browser's default handling of data (links open by default in drop)
Reset output text color and DIV border color
Get drag and drop data using dataTransfer.getData() method
Dragged data element id ("drag1")
Append dragged element to drop element*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
Try it »
Related Pages
HTML Tutorial: HTML5 Drag and Drop
HTML Reference Manual: HTML draggable Attribute