HTML5 Game - Drag and Drop Drag Event

The dragged element events

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.

Demo

ResultView the demo in separate window

<!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>