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

Posted 2023-05-08

【中文标题】HTML 5 拖放 如何判断一个元素是不是接受拖放

【英文标题】：HTML 5 drag and drop How to figure out whether an element accepts a dropHTML 5 拖放 如何判断一个元素是否接受拖放

【发布时间】：2013-06-18 12:42:54

【问题描述】：

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

所以根据这个：

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

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

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

【问题讨论】：

针对 WHATWG 规范提交了此错误 - w3.org/Bugs/Public/show_bug.cgi?id=23486

【参考方案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