MENU


Drag & Drop

DragEvent.dataTransfer.items:
.length
.DataTransferItem(index)...[]
.add(data, type)
.add(file)
.remove(index)
.clear()

DragEvent.dataTransfer.items[i]
.kind...(string or file)
.type...(MIME type)
.getAsFile()
.getAsString()
Dropping HTML elements.
function drop_handler(ev) {
   console.log("Drop");
   ev.preventDefault();
   var dti = ev.dataTransfer.items;
   if (dti === undefined || dti == null) {
      console.log("Browser does not support DataTransferItem interface");
      return;
   }
   /* Get the id of the drag source element (that was added to the drag data payload by the dragstart event handler). 
      Even though only one drag item was explicitly added, the browser may include other items so need to search for the plain/text item. */
  for (var i=0; i < dti.length; i++) {
     console.log("Drop: item[" + i + "].kind = " + dti[i].kind
                  + " ; item[" + i + "].type = " + dti[i].type);
     if ((dti[i].kind == 'string') && (dti[i].type.match('^text/plain'))) {
        dti[i].getAsString(function (id){
          if (id == "src_move" && ev.target.id == "dest_move")
             ev.target.appendChild(document.getElementById(id));
          if (id == "src_copy" && ev.target.id == "dest_copy") {
             var nodeCopy = document.getElementById(id).cloneNode(true);
             nodeCopy.id = "newId";
             ev.target.appendChild(nodeCopy);
          }
        });
     }
  }
}

RESETRUNFULL
<!DOCTYPE html><html><head>
<style type="text/css">
   #div1 {
     width:70px;
     height:70px;
     padding:3px;
     border:1px solid #aaaaaa;
   }
</style>
<script type="text/javascript">
   function allowDrop(ev){
      ev.preventDefault();
   }
   function drag(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
   }
   function drop(ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
   }
</script>
</head><body>
   <p>Drag the image into the rectangle:</p>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <br />
   <img id="drag1" src="/shared/puppy.jpg" draggable="true" ondragstart="drag(event)" width="69" height="69" />
</body></html>
This shows how to obtain a file in the browser by dragging it from the outside.
RESETRUNFULL
<!DOCTYPE html><html><body>
  <div style=" border: 10px dashed #ccc; margin: 20px auto; width: 300px; height: 300px;"></div>
    <script>
       var d = document.querySelector('div');
       d.ondragover = function () {return false;};
       d.ondrop = function(e) {
          this.className = '';
          var f = e.dataTransfer.files[0],
              r = new FileReader();
          r.onload = function (event) {
             d.style.background ='url(' + event.target.result + ')';
          };
          r.readAsDataURL(f);
          return false;
       };
    </script>
</body></html>