HTML5在窗口之间拖放

Question

无论如何使用HTML5拖放功能或/和File API将jpg图像从一个窗口拖到另一个窗口？

我的想法是,我可以将Facebook从Facebook拖动到另一个浏览器的窗口,并使用自定义HTML来获取该图像.

或者,至少,从桌面拖动到浏览器的方法？

非常感谢

Answer 1

不确定窗口之间,但肯定来自桌面:

http://studio.html5rocks.com/#Photos

实际上,请查看完整的html5rocks.com网站以获取相关信息.

编辑:

我刚刚在两个独立的浏览器窗口中打开了这个演示,我可以从一个窗口拖动到另一个窗口.我还能够从Facebook拖动缩略图并将其放入放置区域.

然而,Facebook图像被删除为"未知".所以看起来你可以从一个站点掉到另一个站点,但我不确定到底究竟是什么.如果您从Facebook等拖动,Facebook可能需要让图像或元素具有draggable属性集或您的应用程序可以读取的其他内容.

最重要的是,您应该能够在您可以控制的应用程序之间工作.但是,如果您尝试将其与外部应用程序集成,则需要进行一些实验以找出在拖放过程中确切传递的内容.我自己没有做过这项工作,但这应该不难.

Answer 2

这是一个旧版本,但是由于我最近与它争吵并且除此之外还有更多内容,我给出了答案.作为了解本机方法的介绍,请参阅此站点.

那会让你到目前为止.当谈到在窗户之间拖动时,事情会变得很臭.问题是再一次,浏览器之间没有太多的一致性.打开一堆不同的浏览器然后打开这个优秀的例子.选择第一个getData('Text')单选按钮并测试拖放图像.您会注意到的第一件事是,在某些情况下,getData('Text')包含一个url,但不包含图像url.所以,现在选择getData(e.dataTransfer.types[0]) based on detected content type单选按钮.您会注意到,根据您选择的浏览器,某些类型包含图像的URL会出现,但每个浏览器都有不同的类型.在撰写本文时,某些浏览器(Internet Explorer)没有任何具有图片网址的类型.这就是为什么如果你在Internet Explorer中打开谷歌图像并尝试那种时髦的拖放图像搜索,没有任何反应 - 没有"放在这里"框.

所以,我提出的最好的是(确保你参考上面的那些链接,否则你将不知道我将要发生的事情): -

1. 检查e.dataTransfer.files.如果有文件那么一切都很好.这很可能是本地计算机的丢失.如果没有,请转到步骤2.

2. 循环getData(e.dataTransfer.types[0])并将url传递给正则表达式,该正则表达式检查包含图像URL的字符串.就像是:

   RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
   

   如果你找到匹配,那么一切都很好.做任何你想做的事情,比如传递到服务器来检索图像.如果没有,请转到步骤3.

3. 试试getData('Text').如果你找到匹配那么好.传递到服务器等.如果没有,请转到步骤4.
4. 你运气不好.向用户显示不支持的消息,并要求他们以另一种方式提供图像.