如何使用HTML5拖放在线图像?

时间:2012-06-23 12:50:17

标签: image html5 drag-and-drop

我正在测试拖动和放大器下降。拖拽从我的桌面删除图像工作正常,但我遇到了一个问题:当我拖动&删除“在线”图片(来自其他网站,甚至使用a来自同一网页,变量e.dataTransfer.files为空。

总结我正在尝试做的事情:将图像从桌面拖到我的页面(在特殊区域内),然后在<canvas>内显示图像。我希望能够从我的页面拖动图像,说出“嘿,你可以先试试这些图像!”。

对于拖拉的基础知识我从本教程中获得灵感:http://www.html5rocks.com/en/tutorials/dnd/basics/

1 个答案:

答案 0 :(得分:0)

因为在线拖放被解释为链接,而不是文件传输。您必须先将图片保存在桌面上,然后将其解释为真正的拖放。 但是,由于您已经在页面上显示了图片,因此您可以通过使用现有图片填充画布来实现目标(例如,使用javascript)。

P.S。:只有当您使用2种不同的浏览器时,Drag&amp; Drop才能以您想要的方式工作,例如将图片从IE拖到FF中。为此,您需要在2个不同的浏览器中加载页面。