HTML5 Game - Drag and Drop Drop Event

Receiving the Drop

We receive the dropped element by handling the drop event.

The event is triggered when an item is dropped on the drop zone element.

The following code responds to the drop event using a global variable.

Demo

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </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>            
    /* www.j  av a2 s  .  c  om*/
        <script>
            let src = document.getElementById("src");
            let target = document.getElementById("target");
            let msg = document.getElementById("msg");
          
            let draggedID;
          
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                let newElem = document.getElementById(draggedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                draggedID = e.target.id;
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                let elems = document.querySelectorAll(".dragged");
                for (let i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>