ondrag event

Examples

Execute JavaScript when the <p> element starts dragging:

try it"

Bottom of this article contains more examples

Definition and Usage

ondrag event is triggered when the element is dragged or selected text.

HTML5 Drag and Drop is a very common feature. For more information see our HTML tutorial HTML5 drag and drop .

Note: To make the element draggable, you need to use the HTML5 draggable with property.

Tip: The default links and images are draggable, no draggable attribute.

Drag and drop process will trigger the following events:

Trigger event (source element) on the Drag Target:
- ondragstart - triggered when the user starts dragging elements
- ondrag - the element being dragged trigger
- ondragend - triggered after the user completes the drag element

Releasing the target trigger events:
- OnDragEnter - This event is fired when the mouse is dragged object into its container range
- OnDragOver - This event is triggered when an object is dragged drag object container in another range
- OnDragLeave - This event is fired when the mouse is dragged away from the object within its container range
- onDrop - in a dragging, release the mouse button when you trigger this event

Note: When you drag the elements, every 350 milliseconds triggers ondrag event.

Browser Support

Figures in the table represent the first browser to support this version of events.

event
ondrag	4.0	9.0	3.5	6.0	12.0

grammar

In HTML:

<Elementondrag = "myScript"> try

In JavaScript:

object .ondrag = function () {myScript }; try

JavaScript, use the addEventListener () method:

object .addEventListener ( "drag", myScript ); try

Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.

technical details

Whether to support the bubble:	Yes
It can be canceled:	Yes
Event Type:	DragEvent
Supported HTML tags:	All HTML elements

More examples

Examples

The following example demonstrates all of the drag and drop events:

/ * When the drag trigger * /
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () method to set the data type and drag data
event.dataTransfer.setData ( "Text", event.target.id);
// Output some text while dragging p element
. Document.getElementById ( "demo") innerHTML = "start dragging p element.";
// Modify the transparency of the drag element
event.target.style.opacity = "0.4";
});
// P drag element at the same time, change the color of text output
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// End p element output when dragging some text elements and reset transparency
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "complete p drag element";
event.target.style.opacity = "1";
});
/ * After the completion of the drag trigger * /
// Complete the drag element when p enter droptarget, border styles change div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "3px dotted red";
}
});
// By default, data / elements can not be dragged and dropped in other elements. For drop We must prevent default processing elements
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// When drag and drop the p elements leave droptarget, reset div border styles
document.addEventListener ( "dragleave", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
/ * For drop, prevent default processing data browser (in the drop link is enabled by default)
Reset output border color and text color of the DIV
Use dataTransfer.getData () method to get dropped data
Mop data element id ( "drag1")
Additional elements to the drag 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"

HTML Tutorial: the HTML5 Drag and Drop

HTML Reference Manual: HTML attribute draggable with