33

Javascript で、ユーザーのコンピューターからのファイルのアップロードを受け入れるドラッグ & ドロップ ターゲットを設定する方法を知っています。別の Web サイトからドラッグされた画像を受け入れるドロップ ターゲットを設定するにはどうすればよいですか? 私が知る必要があるのは、彼らがドラッグした画像の URL だけです。

Google Docs は他のウェブサイトからの画像のドロップを受け入れるため、これが可能であることはわかっています。彼らがどのようにやっているのかわかりますか？

4

6 に答える 6

45

アップデート：

Windows と MacOS の Chrome には違いがあるようです。Windows ではdataTransfer.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から画像データを Text として読み取っているのは、イベント ハンドラー内です。dataTransfer他の Web ページから画像をドロップした場合、このテキストは画像の URL を表します。

そして、ここにありlive demoます。

于 2012-08-15T16:41:54.030 に答える
2

text/plain を使用するブラウザもあれば、text/html も使用するブラウザもあります。

このコードは、最新の Chrome ではテキストまたは画像のソース URL を取得し、Mac と PC では FF を取得する必要があります。

Safari は URL を提供していないようです。誰かがその 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 に答える