接受从另一个浏览器窗口拖放图像

Question

在Javascript中，我知道如何设置拖放目标，该目标接受来自用户计算机的文件上传。如何设置放置目标，以接受从其他网站拖动的图像？我只需要知道他们拖动的图片的网址。

我知道这是可能的，因为Google Docs接受来自其他网站的图片丢弃。任何想法他们如何做？

Answer 1

你可以定义一个拖放区：

<div id="dropbox">DropZone => you could drop any image from any page here</div> 

，然后处理dragenter，dragexit，dragover和drop事件：

var dropbox = document.getElementById('dropbox'); 

dropbox.addEventListener('dragenter', noopHandler, false); 
dropbox.addEventListener('dragexit', noopHandler, false); 
dropbox.addEventListener('dragover', noopHandler, false); 
dropbox.addEventListener('drop', drop, false); 

function noopHandler(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
} 
function drop(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var imageUrl = evt.dataTransfer.getData('Text'); 
    alert(imageUrl); 
} 

这是drop事件处理程序，我们都在里面从文字中读取dataTransfer对象的图像数据。如果我们从其他网页中删除图片，则此文字将代表图片的网址。这个是live demo。

---

UPDATE：

它看起来像有在Windows和MacOS浏览器之间的差异。在Windows dataTransfer.getData('Text');工程，但不是在MacOS上。 dataTransfer.getData('URL');应该可以同时工作。

Answer 2

function drop(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var imageUrl = evt.dataTransfer.getData('URL'); // instead of 'Text' 
    alert(imageUrl); 
} 

似乎可用于Mac上的Firefox，Safari和Chrome。也适用于Windows中的Firefox，IE和Chrome。

Updated fiddle

Answer 3

有些浏览器使用text/plain的一些使用文本/ HTML以及

此代码应拉在Mac和PC的最新的Chrome，FF任何文本或图像源的URL。

Safari似乎没有给出URL，所以如果有人知道如何得到它，让我知道。

我还在IE上工作。

function getAnyText(theevent) { 
//see if we have anything in the text or img src tag 
    var insert_text; 
    var location = theevent.target; 
    var etext; 
    var ehtml; 
    try { 
      etext = theevent.dataTransfer.getData("text/plain"); 
    } catch (_error) {} 
    try { 
      ehtml = theevent.dataTransfer.getData("text/html"); 
    } catch (_error) {} 
    if (etext) { 
      insert_text = etext; 
    } else if (ehtml) { 
      object = $('<div/>').html(ehtml).contents(); 
      if (object) { 
        insert_text = object.closest('img').prop('src'); 
      } 
    } 
    if (insert_text) { 
      insertText(insert_text,location); 
    } 
} 

Answer 4

虽然你能够接受来自其他网站的图像的拖放，你不能这样做的任何处理（例如用帆布将其转换为一个base64字符串）（如8月21日的2014），因为各种交叉来源的政策问题。

var dt = event.dataTransfer; 
var url = dt.getData('url'); 
if (!url) { 
    url = dt.getData('text/plain'); 
    if (!url) { 
     url = dt.getData('text/uri-list'); 
      if (!url) { 
       // We have tried all that we can to get this url but we can't. Abort mission 
       return; 
      } 
     } 
    } 

即使谷歌不解决这个问题 - 如果你使用Gmail，您可以将它从另一个位置在电子邮件主体掉落的图像，但是这一切都与它src集创建<img/>元素到url（来自上面的代码）。

但是，我已经创建了一个插件，可以让您伪造它跨越原点的拖放。它需要一个PHP后端。

阅读我就可以在这里写下https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 5

这里的文章是我的问题的解决方案：Dropzone js - Drag n Drop file from same page

请你记住，能力拖动从另一个域取决于他们的CORS设定的图像。