HTML5 拖放 -- 哪些事件可用 setDragImage()？答案

【问题标题】：HTML5 Drag and Drop -- What events are setDragImage() available?HTML5 拖放 -- 哪些事件可用 setDragImage()？
【发布时间】：2012-09-18 06:27:38
【问题描述】：

我目前正在编写 HTML5 拖放代码。在某个区域上，我希望将其拖动图像设置为垃圾图标，并且当鼠标悬停在可拖动区域上时以具有非特定图像。我有事件和逻辑为此工作，但似乎 setDragImage() 函数可能仅在 dragstart 函数上可用。这真的是您可以分配 setDragImage() 的唯一事件吗？我查看了规范，但似乎并没有说明任何一种方式。

【问题讨论】：

你能整理一个简单的fiddle 来展示这个吗？
我想，在这个例子中，我希望悬停只在蓝色区域显示。 jsfiddle.net/kgqkM/3

标签： javascript html drag-and-drop

【解决方案1】：

这是 Firefox 代码库中的相关部分，显示 DataTransfer 对象（保存拖动图像）在拖动启动后设置为只读。

https://mxr.mozilla.org/mozilla-central/source/content/events/src/nsEventStateManager.cpp#2141

2138       // now that the dataTransfer has been updated in the dragstart and
2139       // draggesture events, make it read only so that the data doesn't
2140       // change during the drag.
2141       dataTransfer->SetReadOnly();

这里是 setDragImage 方法，它表明它在允许设置图像之前检查只读。

https://mxr.mozilla.org/mozilla-central/source/content/events/src/nsDOMDataTransfer.cpp#581

580 NS_IMETHODIMP
581 nsDOMDataTransfer::SetDragImage(nsIDOMElement* aImage, int32_t aX, int32_t aY)
582 {
583   if (mReadOnly)
584     return NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR;
585 
586   if (aImage) {
587     nsCOMPtr<nsIContent> content = do_QueryInterface(aImage);
588     NS_ENSURE_TRUE(content, NS_ERROR_INVALID_ARG);
589   }
590   mDragImage = aImage;
591   mDragImageX = aX;
592   mDragImageY = aY;
593   return NS_OK;
594 }

从上面的代码可以看出，拖拽图片只能在Gecko的dragstart事件内更新。

【讨论】：

哇，谢谢！我越是弄乱代码，我就越认为是这种情况（这在 Chrome 中至少是一样的）。不幸的是，没有更多关于拖放事件流的文档，因为它们太多了，哈哈！
+1 用于进入源代码库以证明您的观点。除了阅读 w3c 规范之外，社区还需要做更多的事情