谷歌拖放不起作用

Google drag and drop not working

本文关键字：不起作用 拖放 谷歌      更新时间：2023-09-26

我正在尝试实现拖放div，就像这样。不幸的是，这对我来说不起作用，当我试图拖动到这个div时，会打开一个带有所选文件的新选项卡。这是我的代码

    <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>

我怎样才能让它工作？

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>

谷歌链接已经过时，但这允许文件系统以非常相似的方式工作。上面就是一个例子。

相关文章：