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

Question

在Javascript中,我知道如何设置一个拖放目标,接受来自用户计算机的文件上传.如何设置接受从其他网站拖动的图像的放置目标？我需要知道的是他们拖动的图像的URL.

我知道这是可能的,因为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对象中读取图像数据作为Text.如果我们从其他网页中删除图像,则该文本将代表图像的网址.

这是一个live demo.

更新:

看起来Chrome在Windows和MacOS之间存在差异.在Windows上dataTransfer.getData('Text');工作但不在MacOS上.dataTransfer.getData('URL');应该兼顾两者.