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

Question

我目前正在测试拖放。 从我的桌面上拖放图像效果很好，但是我遇到了一个问题：当我从另一个网站或什至使用a从同一网页拖放“在线”图像时，变量e.dataTransfer.files是空的。

总结一下我想做的事情：将图像从桌面拖到我的页面（在特殊区域内），然后将图像显示在<canvas> 。 我还希望能够从页面上拖动图像，例如说“嘿，您可以先尝试使用这些图像！”。

对于拖放的基础知识，我从本教程中得到了启发： http : //www.html5rocks.com/zh_CN/tutorials/dnd/basics/

Answer 1

因为在线拖放被解释为链接，而不是文件传输。 您必须先将图片保存在桌面上，然后再将其解释为真实的拖放操作。 但是，由于您已经在页面上放置了图片，因此可以通过在画布上填充现有图片（例如使用javascript）来达到目标​​。

PS：仅当您使用2种不同的浏览器时，“拖放”才能按照您想要的方式工作，例如，将图片从IE拖动到FF。 为此，您需要在2种不同的浏览器中加载页面。