Question

在Javascript中，我知道如何设置拖动和放大器删除接受用户计算机上传文件的目标。如何设置接受从其他网站拖动的图像的放置目标？我需要知道的是他们拖动的图片的网址。

我知道这是可能的，因为Google文档接受来自其他网站的图片丢弃。知道他们是怎么做的吗？

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对象中的图像数据作为Text读取。如果我们从其他网页中删除图像，则该文本将代表图像的网址。

这是一个live demo。

更新：

看起来Chrome和Windows上的Chrome存在差异。在Windows上dataTransfer.getData('Text');有效，但在MacOS上无效。 dataTransfer.getData('URL');应该同时适用。

Answer 2

虽然您可以接受从其他网站拖放图像，但您无法对其进行任何处理（例如，使用画布将其转换为base64字符串）（截至2014年8月21日）因为各种跨国政策问题。

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;
             }
         }
     }

即使是Google也无法解决这个问题 - 如果你使用gmail，你可以将图像从另一个位置拖放到电子邮件正文中，但所有这一切都是创建一个<img/>元素及其{{ 1}}设置为src（来自上面的代码）。

但是，我已经创建了一个插件，允许你伪造它的跨源拖放。它需要一个PHP后端。

阅读我在此处撰写的文章https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 3

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 4

有些浏览器使用text / plain一些也使用text / html

此代码应在最新的Chrome，Mac和PC上的FF中提取任何文字或图像源网址。

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 5

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

请注意，从另一个域拖动图片的能力取决于他们的CORS设置。

Answer 6

其他答案正确指出：如果可以从另一个浏览器窗口拖放（必须设置Access-Control-Allow-Origin），通常取决于服务器的CORS设置。

但是我偶然发现，可以将任何图像从Firefox（当前版本68.0.1）拖放到Chrome窗口（当前版本76.0.3809）并使用Javascript处理它，无论是否是否设置了CORS标头。

请参阅working example（基于Darin Dimitrov的jsfiddle），该接受并直接显示以下来源的图像：

从本地计算机（例如从文件资源管理器）拖放
从其他网站拖放。 https://imgur.com/
将所有图像从Firefox窗口拖放到Chrome窗口：
- 在Chrome中打开jsfiddle演示
- 打开例如在Firefox中进行Google图片搜索并搜索任何图片
- 单击图像以获取更大的预览
- 将预览图像拖放到Chrome中的jsfiddle演示中

但是，这似乎是Firefox的一个错误，因此我不会在生产型应用程序中依赖此行为。

接受拖动;从另一个浏览器窗口中删除图像

6 个答案: