Html HTML5 在窗口之间拖放

HTML5 drag and drop between windows

提问by jordi

is there anyway with the HTML5 Drag & Drop functionality or/and the File API to drag an jpg image from one window to another?

无论如何，HTML5 拖放功能或/和文件 API 是否可以将 jpg 图像从一个窗口拖到另一个窗口？

The idea is that I could drag and image from Facebook to a different browser's window with a custom HTML that would get that image.

这个想法是，我可以使用自定义 HTML 将图像从 Facebook 拖动到不同的浏览器窗口，以获得该图像。

Or, at least, a way to drag from the Desktop to a browser?

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

Thanks a lot

非常感谢

回答by Tauren

Not sure about between windows, but certainly from the desktop:

不确定在 Windows 之间，但肯定来自桌面：

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

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

Actually, check out the full html5rocks.comsite for ideas.

实际上，请查看完整的html5rocks.com站点以获取想法。

---

---

EDIT:

编辑：

I just opened this demoin two separate browser windows, and I can drag from one window to the other. I was also able to drag a thumbnail from Facebook and drop it into a drop zone.

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

However, the Facebook image was dropped as "unknown". So it looks like you can drop from one site to another, but I'm not sure what exactly really gets dropped. If you are dragging from Facebook or such, Facebook may need to have the images or elements have the draggableproperty set or something else that your application can read.

但是，Facebook 图像被删除为“未知”。所以看起来你可以从一个站点掉到另一个站点，但我不确定到底是什么被丢弃了。如果您是从 Facebook 等拖拽，Facebook 可能需要让图像或元素具有draggable属性集或您的应用程序可以读取的其他内容。

Bottom line is that you should be able to make it work between applications that you have control over. But if you are trying to integrate it with external apps, you will need to do some experimentation to find out what exactly gets passed during the drag/drop. I haven't done this work myself, but it shouldn't be hard.

底线是您应该能够使其在您可以控制的应用程序之间工作。但是，如果您尝试将其与外部应用程序集成，则需要进行一些实验以找出在拖/放过程中到底传递了什么内容。我自己没有做过这项工作，但应该不难。

回答by acarlon

This is an old one, but since I recently tussled with it and there is more to this than you might think, I put an answer in. As an introduction to learn about the native methods refer to this site.

这是一个旧的，但由于我最近与它发生了争执，并且比您想象的要多得多，我提供了一个答案。作为了解本机方法的介绍，请参阅此站点。

That will get you so far. When it comes to dragging between windows, things get smelly. The problem is that once again, there isn't much consistency between browsers. Open up a bunch of different browsers and then open this excellent example. Select the first getData('Text')radio button and test dragging and dropping images. The first thing that you will notice is that in some instances getData('Text') contains a url, but not the image url. So, now choose getData(e.dataTransfer.types[0]) based on detected content typeradio button. You will notice depending on which browser you choose that some types contain the url to the image appears, but each browser has different types. At the time of writing this some browsers (Internet Explorer) don't have any types that have the image url. This is why if you open up Google images in Internet Explorer and try that funky drag-drop image search, nothing happens - no 'drop here' box appears.

这会让你走到这一步。在窗口之间拖动时，事情变得很臭。问题是，浏览器之间没有太多的一致性。打开一堆不同的浏览器，然后打开这个优秀的例子。选择第一个getData('Text')单选按钮并测试拖放图像。您会注意到的第一件事是，在某些情况下 getData('Text') 包含一个 url，但不包含图像 url。所以，现在选择getData(e.dataTransfer.types[0]) based on detected content type单选按钮。您会注意到，根据您选择的浏览器，某些类型包含显示图像的 url，但每个浏览器都有不同的类型。在撰写本文时，某些浏览器 (Internet Explorer) 没有任何具有图像 url 的类型。这就是为什么如果您在 Internet Explorer 中打开 Google 图片并尝试使用时髦的拖放图片搜索，什么都不会发生 - 不会出现“放在这里”框。

So, the best I have come up with is (make sure you refer to those links above otherwise you won't know what I am going on about): -

所以，我想出的最好的是（确保你参考上面的那些链接，否则你不会知道我在做什么）：-

1. Check e.dataTransfer.files. If there are files then all is well. This is most likely a drop from the local computer. If not, go to step 2.

2. Loop through getData(e.dataTransfer.types[0])and pass the url to a regex that checks for a string containing the image url. Something like:

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

   If you find a match then all good. Do whatever you want, such as passing to server to retrieve image. If not, go to step 3.

3. Try getData('Text'). If you find a match then good. Pass on to server, etc. If not, go to step 4.
4. You are out of luck. Show the user with an unsupported message and ask them to provide the image another way.

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. 你倒霉了。向用户显示不受支持的消息，并要求他们以另一种方式提供图像。

回答by Demelziraptor

If you're using jQuery you could have a look at this: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

如果你使用 jQuery，你可以看看这个：https: //github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

On the about page:
It works by sending a JSONP request with the URL of the image to Google's servers via the Google App Engine1. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by the canvas tag.

在关于页面上：
它的工作原理是通过 Google App Engine1 将带有图像 URL 的 JSONP 请求发送到 Google 的服务器。然后，服务器将图像转换为 base64 编码的数据 URL，并将图像作为 JSON 对象发回。这意味着图像可以本地包含在网站上，因此可以通过画布标签进行编辑。

I haven't tried it yet, but will be taking a look at it soon!

我还没有尝试过，但很快就会去看看！

回答by Francis Fussiger

*getting the url from the dragged image, 100% ok to firefox and chrome *

*从拖动的图像中获取 url，100% 可以使用 firefox 和 chrome *

$('#element').bind('drop', function (e) {
    alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});

回答by dlo

I know you can very easily get the URL of the image that was dragged: myDataTransfer.getData("Text")

我知道你可以很容易地得到被拖动图像的 URL： myDataTransfer.getData("Text")

but so far I haven't been able to find a way to retrieve the underlying image data without falling foul of cross-domain javascript security... you can't fetch the image using ajax, and you can't use a canvas as an intermediary either.

但到目前为止，我还没有找到一种方法来检索底层图像数据而不会违反跨域 javascript 安全性……您无法使用 ajax 获取图像，也无法使用画布作为一个中介。

Unfortunately, it seems that in most cases, the drag itself (that is, the dataTransfer object) doesn't contain the image data. I say "most cases" because drags from within the same browser don't, but when I dragged from a Firefox window to a Chrome window, it seems to have included some kind of bitmap image, but it's in some unusual format (perhaps a Windows thing).

不幸的是，似乎在大多数情况下，拖动本身（即 dataTransfer 对象）不包含图像数据。我说“大多数情况”是因为从同一个浏览器中拖动不会，但是当我从 Firefox 窗口拖动到 Chrome 窗口时，它似乎包含了某种位图图像，但它是某种不寻常的格式（也许是窗户的东西）。

The only other thing to look at is browser-specific functionality, like "application/x-moz-nativeimage", but I don't see any similar property attached to the dataTransfer object in Chrome.

唯一要查看的另一件事是特定于浏览器的功能，例如“application/x-moz-nativeimage”，但我没有看到任何类似的属性附加到 Chrome 中的 dataTransfer 对象。

回答by Daniel X Moore

In Chrome you can use Copy/Paste, you'll need to copy the image by right-clicking and choosing "Copy Image", then you can paste it into another page that handles paste events with Ctrl+V.

在 Chrome 中，您可以使用复制/粘贴，您需要通过右键单击并选择“复制图像”来复制图像，然后您可以将其粘贴到另一个使用 Ctrl+V 处理粘贴事件的页面中。

Here is a demo illustrating the principle: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

这是一个演示原理的演示：http: //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

回答by dkris

Here is an example of the file drag and drop using HTML5. This doesn't seem to work from one browser window to another(Desktop->browser works). But you can use this as a reference.

这是使用 HTML5 进行文件拖放的示例。这似乎不适用于从一个浏览器窗口到另一个浏览器窗口（桌面-> 浏览器工作）。但是您可以将其用作参考。

this is an experiment using web id to create a HTML5 form.

这是一个使用 web id 创建 HTML5 表单的实验。

http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/

http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/