33

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

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

4

6 回答 6

45

更新：

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

旧答案：

您可以定义一个拖放区：

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

这是一个live demo.

于 2012-08-15T16:41:54.030 回答
4 
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。

更新的小提琴

于 2012-08-20T04:50:00.593 回答
4

虽然您可以接受从另一个网站拖放图像，但您无法对其进行任何处理（例如使用画布将其转换为 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/>元素（来自上面的代码）。srcurl

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

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

于 2014-08-21T16:36:57.170 回答
3

这是我对问题的解决方案：Dropzone js - 从同一页面拖放文件

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

于 2017-03-27T09:05:05.043 回答
2

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

此代码应在最新的 Chrome、Mac 和 PC 上的 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);
    }
}
于 2014-01-16T01:29:29.823 回答
1

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

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

请参阅工作示例（基于 Darin Dimitrov 的 jsfiddle），该示例接受并直接显示来自以下位置的图像：

  1. 从本地计算机拖放（例如从文件资源管理器）
  2. 如果设置了 CORS 标头，则从其他网站拖放，例如来自https://imgur.com/的图像
  3. 将任何图像从 Firefox 窗口拖放到 Chrome 窗口：
    • 在 Chrome 中打开 jsfiddle 演示
    • 在 Firefox 中打开例如谷歌图片搜索并搜索任何图片
    • 点击图片放大预览
    • 将预览图像拖放到 Chrome 中的 jsfiddle 演示中

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

于 2019-08-09T12:41:31.187 回答