理解HTML中的拖放

时间:2012-09-26 09:40:57

标签: html5 filelist dto

我很难理解HTML 5中的拖放,特别是dropeffect和effectallowed属性。我查看了文档和示例,但我仍然没有得到很好的控制。特别是,您可以在页面内拖动数据,另一方面从页面外部拖动文件,这对我来说是模糊的。

首先,当我将页面内的图像拖到放置区域时,DataTransfer对象的FileList为空。但这是否意味着您也无法访问页面中的图像,就像访问页面外的文件一样? (例如获取他们的属性或将它们提供给FileReader)

我不理解的另一件事是dropEffect和effectsAllowed。它们是与setData和getData方法结合使用还是与从页面外拖出的文件一起使用?

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

1 个答案:

答案 0 :(得分:0)

嗯还没有答案,但我还有一点点。以防万一其他人想知道这件事:

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

当你将 effectsAllowed 设置为多个效果(例如copymove)时,Firefox(15)会使用标准的光标。此行为是在Chrome中写入不同的时刻,它只使用 dropEffect 指定的图标。后者对我来说似乎更合乎逻辑,所以Firefox可能只是错误的。

我发现这个视觉提示适用于网页内的两个元素以及浏览器外部的文件。

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