了解 HTML 中的拖放答案

【问题标题】：understanding drag and drop in HTML了解 HTML 中的拖放
【发布时间】：2012-09-26 09:40:57
【问题描述】：

我很难理解 HTML 5 中的拖放，尤其是 dropeffect 和 effectsallowed 属性。我浏览了文档和示例，但仍然没有很好地掌握。特别是，您可以在页面内拖动数据，另一方面从页面外部拖动文件，这对我来说很模糊。

首先，当我将页面内的图像拖到放置区域时，DataTransfer 对象的 FileList 为空。但这是否意味着您也不能像访问页面外部文件一样访问页面中的图像？（例如，获取它们的属性或将它们提供给 FileReader）

我不明白的另一件事是 dropEffect 和 effectsAllowed。它们是与 setData 和 getData 方法结合使用，还是与从页面外部拖动的文件结合使用？

我认为如果我设置 event.dataTransfer.dropEffect = 'move'，那么页面外的文件实际上会被移动并消失在旧位置。但是，当我将某些内容拖到页面中时，除了 dropEffect 字符串值之外，我看不到移动/链接/复制之间的任何实际区别。

【问题讨论】：

【解决方案1】：

嗯，还没有答案，但我更进一步。以防万一其他人对此感到疑惑：

dropEffect 和 effectsAllowed 属性显然只是拖动操作的视觉提示。不多也不少。这意味着光标图标会根据使用的效果而变化。这是一个小脚本，您可以在其中看到它的实际效果：http://help.dottoro.com/ljffjemc.php

当您将 effectsAllowed 设置为多个效果（例如 copymove）时，Firefox (15) 会使用标准放置光标。这种行为在 Chrome 中编写时有所不同，它只使用 dropEffect 指定的图标。后者对我来说似乎更合乎逻辑，所以也许 Firefox 只是有问题。

我发现这种视觉提示既适用于网页内的元素，也适用于浏览器外部的文件。

但是将 dropEffect 设置为例如 'move' 与真正移动文件无关。

【讨论】：