javascript - 在 html5 中 dragleave 后下降

Question

我注册了 HTML5 DnD 事件，以便从桌面获取拖放文件。我看到的问题是我总是在 drop 事件之前得到 dragleave 事件。在规范中没有提到这样的事情 - 如果您使用 dragleave 作为没有发生下降的指示器，那么它会弄乱逻辑。

var dropbox = document.getElementById("dropzone");
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragleave", dragLeave, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);

function dragEnter(e){
    console.log("dragEnter ",e);
    dropbox.style.backgroundColor = "red";
    e.stopPropagation();
    e.preventDefault();
}

function dragLeave(e){
    console.log("dragleave");
    dropbox.style.backgroundColor = "white";
    e.stopPropagation();
    e.preventDefault();
}

function dragOver(e){
    console.log("dragOver ",e);
    e.stopPropagation();
    e.preventDefault();
}

function drop(e){
     console.log("drop ",e);
     var files = e.dataTransfer.files;
     var count = files.length;
     e.stopPropagation();
     e.preventDefault();
}

这是设计工作还是我遗漏了什么？

Answer 1

这似乎是一个很好的引用:http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

基本上，dragLeave 并不表示没有发生掉落。它是一个可拖动对象被拖出另一个对象的指示符。
你不需要它。

[编辑:基本上，dragleave 正在触发，因为您拖动的项目来自您的桌面。 object 在你放下它之前它所在的基本上就是你的桌面。如果您将桌面上的任何文件拖到任何 droptarget 上，它将触发 dragleave 以指示它不再“位于”前一个对象(您的桌面)中，现在位于新对象中(“dropzone” ”)。如果您有多个放置区，每次将其拖过，然后从其中一个拖出，dragleave 就会触发。您应该只使用 drop 事件来判断是否发生了掉落。]