2011/08/02

他ブラウザからドロップする

ブラウザ外の別アプリケーションからドラッグ&ドロップを受け入れるには、ドロップイベントを補足してdataTransferでドロップされた情報を読み取ります。
他アプリケーション(ブラウザ)からドロップすることができるMIME/TYPEは、「text/plain」「text/html」「text/xml」「text/uri-list」です。

下の例は、他ブラウザで適当なサイトを表示して適当な文字を選択し、そのまま四角の中にドロップすると、ドロップされた情報を表示する例です。
テキストにはHTMLタグがある可能性があるので、タグが処理されないように一旦HTMLのDiv要素に入れることでタグが処理されないようにエスケープ処理をかけています。
FireFoxで実行すると自動的にリンク読み込み処理が走ってエラーが表示されるようです。



ここにドロップして下さい。





<div id="dropSample" ondragover="onDragOver2(event)" onDrop="onDrop2(event)" style="border:1px solid #0000FF;border-radius:4px; width:300px; height:200px">
ここにドロップして下さい。
</div>
<div id="dropItemInfo"></div>
<script type="text/javascript">
var di = document.getElementById("dropItemInfo");
function onDrop2(event) {
    var text = event.dataTransfer.getData("text/plain");
    di.innerHTML = escapeHTML(text);
}
function onDragOver2(event) {
    event.preventDefault();
}
function escapeHTML(str) {
    var div = document.createElement("div");
    var text = document.createTextNode("");
    div.appendChild(text);
    text.data = str;
    return div.innerHTML;
}
</script>


0 件のコメント:

コメントを投稿