別のブラウザウィンドウから画像のドラッグ＆ドロップを受け入れる

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イベントハンドル：それは私たちがしていること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); 
} 

をdataTransferオブジェクトから画像データをテキストとして読み込みます。他のウェブページから画像をドロップした場合、このテキストは画像のURLを表します。

ここには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/htmlのテキスト/プレーンを使用するだけでなく

このコードは、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); 
    } 
} 

Answer 4

あなたが別のWebサイトから画像をドラッグ＆ドロップを受け入れることができるですが、あなたはそれのいずれかの処理を行うことができない（例えばキャンバスを使用した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; 
      } 
     } 
    } 

Googleでさえ、この問題を回避することはできません - 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の設定に依存していることを覚えておいてください。