我注册了 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();
}
这是设计工作还是我遗漏了什么?
最佳答案
这似乎是一个很好的引用:http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
基本上,dragLeave
并不表示没有发生掉落。它是一个可拖动对象被拖出另一个对象的指示符。
你不需要它。
[编辑:基本上,dragleave
正在触发,因为您拖动的项目来自您的桌面。 object
在你放下它之前它所在的基本上就是你的桌面。如果您将桌面上的任何文件拖到任何 droptarget 上,它将触发 dragleave
以指示它不再“位于”前一个对象(您的桌面)中,现在位于新对象中(“dropzone” ”)。如果您有多个放置区,每次将其拖过,然后从其中一个拖出,dragleave
就会触发。您应该只使用 drop
事件来判断是否发生了掉落。]
关于javascript - 在 html5 中 dragleave 后下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4759387/