HTML DOM ondragstart Event
The HTML DOM ondragstart Event occurs when a draggable element starts drag.
There are some events that are used and occurred in the different stages of a drag and drop operation:
Events fired on the draggable target:
- ondragstart: occurs when dragging of an element started.
- ondrag: occurs while an element is dragging.
- ondragend: occurs when dragging of an element finished.
Events fired on the drop target:
- ondragenter: occurs when the dragged element entered into the drop target.
- ondragover: occurs when the dragged element is over the drop target.
- ondragleave: occurs when the dragged element leaves from the drop target.
- ondrop: occurs when the dragged element is dropped on the drop target.
Syntax:
- In HTML:
<element ondragstart="myScript">
- In JavaScript:
object.ondragstart = function(){myScript};
- In JavaScript, using the addEventListener() method:
object.addEventListener("dragstart", myScript);
Note: Links and images are draggable by default.
Example 1:
html
<!DOCTYPE HTML> < html > < head > < title >HTML DOM ondrop Event</ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" ondrop = "dropEle(event)" ondragover = "allowDropEle(event)" > < p ondragstart = "dragStartEle(event)" draggable = "true" id = "dragtarget" > Draggable element </ p > </ div > < div class = "droptarget" ondrop = "dropEle(event)" ondragover = "allowDropEle(event)" > </ div > < p id = "demo" ></ p > < script > function dragStartEle(event) { event.dataTransfer.setData( "Text", event.target.id); document.getElementById( "demo").innerHTML = "Dragging starts"; } function allowDropEle(event) { event.preventDefault(); } function dropEle(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; } </ script > </ center > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE HTML> < html > < head > < title > HTML DOM ondrop Event </ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" > < p draggable = "true" id = "dragtarget" > Draggable element </ p > </ div > < div class = "droptarget" > </ div > < p id = "demo" ></ p > < script > // Event fired on the drag target document.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Dragging starts"; }; // Events fired on the drop target document.ondragover = function(event) { event.preventDefault(); }; document.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; }; </ script > </ center > </ body > </ html > |
Output:
Example 3:
html
<!DOCTYPE HTML> < html > < head > < title >HTML DOM ondrop Event</ title > < style > .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </ style > </ head > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 >HTML DOM ondrop Event</ h2 > < div class = "droptarget" > < p draggable = "true" id = "dragtarget" > Draggable element</ p > </ div > < div class = "droptarget" ></ div > < p id = "demo" ></ p > < script > // Event fired on the drag target document.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Dragging starts"; }); // Events fired on the drop target document.addEventListener("dragover", function(event) { event.preventDefault(); }); document.addEventListener("drop", function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "Element dropped"; }); </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by HTML DOM ondragstart Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera