YouTip` element:
Drag me!
[Try it yourself »](#) More examples are provided at the bottom of this article. * * * ## Definition and Usage The `ondrag` event fires when an element or selected text is being dragged. Drag-and-drop is a very common feature in HTML5. For more information, see (#) in our HTML tutorial. **Note:** To make an element draggable, you must use the HTML5 (#) attribute. **Tip:** Links and images are draggable by default and do not require the `draggable` attribute. The following events are fired during drag-and-drop operations: * **Events fired on the drag target (source element):** — Fires when the user starts dragging an element * ondrag — Fires while an element is being dragged — Fires after the user completes dragging an element * **Events fired when releasing the target:** — Fires when a dragged object enters the container’s boundaries — Fires when a dragged object is moved over the container’s boundaries — Fires when a dragged object leaves the container’s boundaries — Fires when the mouse button is released during a drag operation **Note:** The `ondrag` event fires every 350 milliseconds while an element is being dragged. * * * ## Browser Support The numbers in the table specify the first browser version that fully supports the event. | Event | | | | | | | --- | --- | --- | --- | --- | --- | | ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 | * * * ## Syntax In HTML: (#) In JavaScript: _object_.ondrag=function(){_myScript_};(#) In JavaScript, using the `addEventListener()` method: _object_.addEventListener("drag", _myScript_);(#) **Note:** The `addEventListener()` method is not supported in Internet Explorer 8 and earlier versions. * * * Technical Details | Bubbles: | Yes | | --- | | Cancelable: | Yes | | Event Interface: | DragEvent | | Supported HTML Tags: | All HTML elements | * * *  ## More Examples ## Example The following example demonstrates all drag-and-drop events: /* Triggered during dragging */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() sets the data type and the data to be dragged event.dataTransfer.setData("Text", event.target.id); // Output some text when dragging theelement document.getElementById("demo").innerHTML = "Started dragging the
element."; // Modify the opacity of the dragged element event.target.style.opacity = "0.4"; }); // Change the output text color while dragging the
element document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Output some text and reset opacity after dragging the
element document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the
element"; event.target.style.opacity = "1"; }); /* Triggered after dragging completes */ // When the
element finishes dragging into the droptarget, change the div's border style document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // By default, data/elements cannot be dropped into other elements. To allow dropping, we must prevent the default handling document.addEventListener("dragover", function(event) { event.preventDefault(); }); // When the draggable
element leaves the droptarget, reset the div's border style document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* For drop, prevent the browser's default handling of data (by default, links open on drop) Reset the output text color and the div's border color Use dataTransfer.getData() to retrieve the dragged data The ID of the dragged element ("drag1") Append the dragged element to the drop target */ 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 yourself »](#) * * * ## Related Pages HTML Tutorial: (#) HTML Reference: (#) [ Event Object](#)