Google拖放无法正常工作

Question

I am trying to implement drag and drop div, like this . Unfortunately, it doesn't work for me, when I try to drag to this div, a new tab with the selected file opens. Here is my code

    <div id="dropzone" style="height:200px; border: 4px double black;" ></div>
    <script>
        window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
        var dropzone = document.getElementById('dropzone');
        dropzone.ondrop = function(e) {
          var length = e.dataTransfer.items.length;
          for (var i = 0; i < length; i++) {
            var entry = e.dataTransfer.items[i].webkitGetAsEntry();
            if (entry.isFile) {
               // do whatever you want
            } else if (entry.isDirectory) {
               // do whatever you want
            }
          }
        };
  </script>

How can I make it work?

Answer 1

 var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } 

 #dropbox { height: 100px; border: 4px double black; background-color: lightgray; font: 5em bold monospace; text-align: center; } 

 <div id="dropbox"> Drag files here! </div> 

The Google link is outdated, but this allows the file system to work in a very similar fashion. An example of this is above.