HTML 5拖放如何确定元素是否接受放置 [英] HTML 5 drag and drop How to figure out whether an element accepts a drop

问题描述

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

HTML5 drag and drop, trying to work out whether to allow a drop on an element.

所以根据这个：

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

您无法在dragover上阅读DataTransfer数据存储。因为dragover是你应该取消的事件，表示你接受掉落 - 并且在dragOver期间你无法分辨出被拖动的东西，这应该是怎么回事？我在这里遗漏了一些明显的东西？

You cannot read the DataTransfer dataStore on dragover. Since dragover is the event you are supposed to cancel to indicate that you accept a drop - and given that during dragOver you cannot tell what is being dragged, how is this supposed to work ? I am missing something obvious here ?

似乎你必须取消dragover / dragenter，如果有可能被拖动的东西可以放在你的元素上，但是你只能找出被拖落的东西。

It seems to be that you must cancel dragover/dragenter if there is any chance what is being dragged could be dropped on your element, but you can only find out what was getting dragged on the drop.

推荐答案

所以 - 我们找到了一种方法来做到这一点。

So - we figured out a way to do this.

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

You can read the dataTransfer.types property which returns a list of the types added via setData. So if you use a custom string as one of those types, you can check that to verify the existence of drag data that you added.

例如。

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

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

Then in dragover you can see if this type exists :

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

这篇关于HTML 5拖放如何确定元素是否接受放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！