HTML5 Game - Drag and Drop DataTransfer Object

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

Working with the DataTransfer Object

The object dispatched with the events triggered for drag and drop is DragEvent.

It is derived from MouseEvent.

The DragEvent object defines all of the functionality of the Event and MouseEvent objects.

The additional property is shown in the following table.

NameDescription Returns
dataTransfer Returns the object used to transfer data to the drop zone DataTransfer

We use the DataTransfer object to transfer data from the dragged element to the drop zone element.

The properties and methods that the DataTransfer object defines are described in the following table.

Name DescriptionReturns
types Returns the formats for the data string[]
getData(<format>) Returns the data for a specific format string
setData(<format>, <data>)Sets the data for a given format void
clearData(<format>) Removes the data for a given formatvoid
files Returns a list of the files that have been dragged FileList

The following code uses the DataTransfer object to transfer data from the dragged element to the drop zone.

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>            
    //from   w ww.j a v a  2s . co  m
        <script>
            let src = document.getElementById("src");
            let target = document.getElementById("target");
                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                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 Topics