HTML5 Game - Filtering Dragged Items by Data from DataTransfer object

  1. HOME
  2. HTML5 Game
  3. Drag and Drop
  4. DataTransfer Object

Introduction

We can use the data stored in the DataTransfer object to accept certain kinds of elements in the drop zone.

The following code uses the DataTransfer object to filter dragged elements

Demo

ResultView the demo in separate window 

<!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>            
    //w w w. j  av a  2  s.  c  o m
        <script>
let src = document.getElementById("src");
let target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;

function handleDrag(e) {
    if (e.dataTransfer.getData("Text") == "myJet1") {
        e.preventDefault();
    }
}
target.ondrop = function(e) {
    let droppedID = e.dataTransfer.getData("Text");
    let newElem = document.getElementById(droppedID).cloneNode(false);
    target.innerHTML = "";
    target.appendChild(newElem);
    e.preventDefault();
}
src.ondragstart = function(e) {
    e.dataTransfer.setData("Text", 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>

Related Topic