HTML 5 拖放 如何判断一个元素是否接受拖放

Question

HTML5 拖放，试图确定是否允许拖放元素。

所以根据这个：

http://dev.w3.org/html5/spec-preview/dnd.html#dndevents

您无法在 dragover 上读取 DataTransfer 数据存储。由于dragover是您应该取消以表明您接受放置的事件-并且鉴于在dragOver期间您无法分辨正在拖动的是什么，这应该如何工作？我在这里遗漏了一些明显的东西？

如果有可能将被拖动的内容拖放到您的元素上，您似乎必须取消dragover/dragenter，但您只能找出拖放的内容。

Answer 1

所以 - 我们想出了一个方法来做到这一点。

您可以读取 dataTransfer.types 属性，该属性返回通过 setData 添加的类型列表。因此，如果您使用自定义字符串作为其中一种类型，您可以检查它以验证您添加的拖动数据是否存在。

例如

event.dataTransfer.setData("SpecialNameOfDragSource", data);

然后在dragover中你可以查看这个类型是否存在：

function ondragover(ev) {
    if (ev.dataTransfer.types && ev.dataTransfer.types.indexOf("SpecialNameOfDragSource") > -1) {
         // cancel the event
    }
 }