The dragged element events are targeted at the dragged element and events that are targeted at potential drop zones.
The following table describes those events that are for the dragged element.
Name | Description |
---|---|
dragstart | Triggered when the element is first dragged |
drag | Triggered repeatedly as the element is being dragged |
dragend | Triggered when the drag operation is completed |
We can use these events to emphasize the drag operation visually.
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> #src > * {float:left;} #target, #src > img {border: thin solid black; padding: 2px; margin:4px;} #target {height: 81px; width: 81px; text-align: center; display: table;} #target > p {display: table-cell; vertical-align: middle;} #target > img {margin: 1px;} img.dragged {background-color: lightgrey;} /*w ww .jav a 2s . c om*/ </style> </head> <body> <div id="src"> <img draggable="true" id="myJet1" src="http://java2s.com/style/demo/jet.png" alt="myJet1"/> <img draggable="true" id="myJet2" src="http://java2s.com/style/demo/jet2.png" alt="myJet2"/> <img draggable="true" id="myJet3" src="http://java2s.com/style/demo/jet.png" alt="myJet3"/> <div id="target"> <p id="msg">Drop Here</p> </div> </div> <script> let src = document.getElementById("src"); let target = document.getElementById("target"); let msg = document.getElementById("msg"); src.ondragstart = function(e) { e.target.classList.add("dragged"); } src.ondragend = function(e) { e.target.classList.remove("dragged"); msg.innerHTML = "Drop Here"; } src.ondrag = function(e) { msg.innerHTML = e.target.id; } </script> </body> </html>