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
dragTriggered repeatedly as the element is being dragged
dragendTriggered 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>