确定从Dragenter和Dragover事件中拖动的内容

Question 1

我正在尝试使用HTML5可拖动API（尽管我意识到它有问题）。到目前为止，我遇到的唯一的难题是，我无法找到一种方法来确定当dragoverordragenter事件触发时正在拖动的内容：

el.addEventListener('dragenter', function(e) {
  // what is the draggable element?
});

我意识到我可以假定这是触发dragstart事件的最后一个元素，但是...多点触控。我也尝试过使用e.dataTransfer.setDatafromdragstart来附加一个唯一的标识符，但是很显然，无法从dragover/访问数据dragenter：

仅在放置事件期间发生放置时，此数据才可用。

那么，有什么想法吗？

更新：在撰写本文时，似乎没有在任何主要的移动浏览器中实现HTML5拖放，这实际上是关于多点触控的。但是，我希望有一个解决方案能够保证在该规范的任何实现中都可以使用，但这似乎并不妨碍同时拖动多个元素。

我在下面发布了一个可行的解决方案，但这是一个丑陋的hack。我仍然希望有一个更好的答案。

Question 2

我想在这里添加一个非常明确的答案，以便所有徘徊在这里的人都可以看到。在其他答案中已经说过几次了，但是在这里，我可以清楚地做到：

`dragover` 没有权利在拖动事件中查看数据。

此信息仅在DRAG_START和DRAG_END（删除）期间可用。

问题在于，直到您碰巧对规范或此处的地方进行了足够深入的阅读后，问题才变得显而易见并发疯。

周围的工作：

作为一种可能的解决方法，我向DataTransfer对象添加了特殊键并对其进行了测试。例如，为了提高效率，我想在拖动开始时查找一些“放置目标”规则，而不是每次发生“拖动”时。为此，我在dataTransfer对象上添加了用于标识每个规则的键，并使用“包含”测试了这些键。

ev.originalEvent.dataTransfer.types.includes("allow_drop_in_non_folders")

这样的事情。需要明确的是，“包含”并不是万能的，它本身也可能成为性能问题。注意了解您的用法和方案。

Question 3

简短的回答我的问题真可谓是：否。WHATWG规范不提供的一个参考要素被拖动（称为规范“源节点”） dragenter，dragover或dragleave事件。

为什么不？两个原因：

首先，正如Jeffery在其评论中指出的那样，WHATWG规范基于IE5 +的拖放实现，该实现早于多点触摸设备。（在撰写本文时，没有主要的多点触摸浏览器实现HTML拖放。）在“单点触摸”上下文中，很容易在上存储对当前拖动元素的全局引用dragstart。

其次，HTML拖放允许您跨多个文档拖动元素。这是真棒，但它也意味着提供给该元件为基准在每一个拖累dragenter，dragover或dragleave事件就没有意义; 您不能在其他文档中引用元素。API的优势在于，无论拖动来自同一文档还是其他文档，这些事件的工作方式都相同。

但是，除了通过dataTransfer.types（如我的工作解决方案答案中所述）之外，无法为所有拖动事件提供序列化信息是API中明显的遗漏。我已经向WHATWG提交了有关拖动事件中的公共数据的提案，希望您能表示支持。

Question 4

（非常优雅的）解决方案是将选择器存储为对象中的一种数据类型dataTransfer。这是一个示例：http : //jsfiddle.net/TrevorBurnham/eKHap/

活动行是

e.dataTransfer.setData('text/html', 'foo');
e.dataTransfer.setData('draggable', '');

然后在dragover和dragenter事件中，e.dataTransfer.types包含字符串'draggable'，这是确定要拖动哪个元素所需的ID。（请注意，浏览器显然也需要为可识别的MIME类型设置数据，以text/html使其正常工作。已在Chrome和Firefox中进行了测试。）

这是一个丑陋，丑陋的骇客，如果有人可以给我更好的解决方案，我会很乐意为他们提供赏金。

更新：一个值得补充的警告是，除了不雅观外，该规范还指出所有数据类型都将转换为小写ASCII。因此请注意，涉及大写字母或unicode的选择器将中断。杰弗里的解决方案避开了这个问题。

Question 5

根据当前的规范，我认为没有任何解决方案不是“ hack”的。请愿WHATWG是解决此问题的一种方法:-)

扩展“（非常优雅）解决方案”（演示）：

创建当前正在拖动的所有元素的全局哈希：
```
var dragging = {};
```

在dragstart处理程序中，为元素分配一个拖动ID（如果尚没有该元素），将该元素添加到全局哈希中，然后将拖动ID作为数据类型添加：

var dragId = this.dragId;

if (!dragId) {
    dragId = this.dragId = (Math.random() + '').replace(/\D/g, '');
}

dragging[dragId] = this;

e.dataTransfer.setData('text/html', dragId);
e.dataTransfer.setData('dnd/' + dragId, dragId);

在dragenter处理程序中，找到数据类型之间的拖动ID，然后从全局哈希中检索原始元素：

var types = e.dataTransfer.types, l = types.length, i = 0, match, el;

for ( ; i < l; i++) {
    match = /^dnd\/(\w+)$/.exec(types[i].toLowerCase());

    if (match) {
        el = dragging[match[1]];

        // do something with el
    }
}

如果将dragging哈希值专用于自己的代码，则即使第三方代码可以访问拖动ID，第三方代码也将无法找到原始元素。

假设每个元素只能拖动一次；我想通过多点触摸可以使用不同的手指多次拖动同一元素...

更新：为了允许对同一元素进行多次拖动，我们可以在全局哈希中包括拖动计数：http : //jsfiddle.net/jefferyto/eKHap/2/

Question 6

要检查它是否是文件，请使用：

e.originalEvent.dataTransfer.items[0].kind

要检查类型，请使用：

e.originalEvent.dataTransfer.items[0].type

即我只允许一个文件jpg，png，gif，bmp

var items = e.originalEvent.dataTransfer.items;
var allowedTypes = ["image/jpg", "image/png", "image/gif", "image/bmp"];
if (items.length > 1 || items["0"].kind != "file" || items["0"].type == "" || allowedTypes.indexOf(items["0"].type) == -1) {
    //Type not allowed
}

参考：https : //developer.mozilla.org/it/docs/Web/API/DataTransferItem

Question 7

您可以确定拖动开始时要拖动的内容，并将其保存在变量中，以在触发拖动/拖动事件时使用：

var draggedElement = null;

function drag(event) {
    draggedElement = event.srcElement || event.target;
};

function dragEnter(event) {
    // use the dragged element here...
};

Question 8

在这种情况drag下，将复制event.x并event.y到一个对象，并将其设置为拖动元素上的expando属性的值。

function drag(e) {
    this.draggingAt = { x: e.x, y: e.y };
}

在dragenter和dragleave事件中，找到其expando属性值与当前事件的event.x和相匹配的元素event.y。

function dragEnter(e) {
    var draggedElement = dragging.filter(function(el) {
        return el.draggingAt.x == e.x && el.draggingAt.y == e.y;
    })[0];
}

为了减少需要查看的元素数量，可以通过将元素添加到数组或在dragstart事件中分配一个类，然后在事件中撤消该元素来跟踪元素dragend。

var dragging = [];
function dragStart(e) {
    e.dataTransfer.setData('text/html', '');
    dragging.push(this);
}
function dragEnd(e) {
    dragging.splice(dragging.indexOf(this), 1);
}

http://jsfiddle.net/gilly3/4bVhL/

现在，从理论上讲这应该起作用。但是，我不知道如何为触摸设备启用拖动，因此无法对其进行测试。此链接为移动格式，但触摸和滑动并没有导致拖动在我的android上开始。 http://fiddle.jshell.net/gilly3/4bVhL/1/show/

编辑：据我了解，在任何触摸设备上似乎都不支持HTML5可拖动。您是否可以在任何触摸设备上进行拖动操作？如果不是这样，那么多点触摸就不会成为问题，您可以求助于将拖动的元素存储在变量中。

Question 9

根据我对MDN的了解，您所做的是正确的。

MDN列出了一些推荐的拖动类型，例如text / html，但是如果不合适，则只需使用“ text / html”类型将id存储为文本，或者创建自己的类型，例如“ application / node-id”。

Question 10

~~我认为您可以致电e.relatedTarget 以下网址获得它：http : //help.dottoro.com/ljogqtqm.php~~

好的，我尝试了一下，e.target.previousElementSibling并且可以正常工作。... http : //jsfiddle.net/Gz8Qw/4/我认为由于事件被触发两次而挂断了。一次用于div，一次用于文本节点（为文本节点触发时为undefined）。不确定是否能将您带到您想去的地方...

确定从Dragenter和Dragover事件中拖动的内容

dragover 没有权利在拖动事件中查看数据。

`dragover` 没有权利在拖动事件中查看数据。