Question

使用拖放上传时，是否有办法让页面上有多个“类型”的放置区？例如，如果我有一个放置区域，当文件被丢弃时会触发文件上载，而另一个放置区域会导致警告说“错误的放置区域！”弹出。

似乎html5中有一个drop事件被调用，而不管用户与哪个drop zone进行交互。

我已经尝试使用jQuery来提出一些解决方案 - 例如，在触发掉落事件后立即检查鼠标悬停在哪个div上，但是当我测试它时它不能很好地工作。 / p>

谢谢！

Answer 1

我不确定问题的原因 - 但你可以拥有尽可能多的掉落目标。你需要创建两个元素，并倾听他们的dragover，dragenter和drop事件。如果你想接受掉落，你需要取消前两个，并处理掉落以对它做一些事情。

var dz1 = document.getElementById("dz1");
var dz2 = document.getElementById("dz2");

dz1.addEventListener("dragenter", cancelEvent);
dz2.addEventListener("dragenter", cancelEvent);
dz1.addEventListener("dragover", cancelEvent);
dz2.addEventListener("dragover", cancelEvent);

dz1.addEventListener("drop", function(e) {
    alert("You dropped on One");
    cancelEvent(e);
});

dz2.addEventListener("drop", function(e) {
    alert("You dropped on Two");
    cancelEvent(e);
});

具有不同功能的多个下降区

1 个答案: