他アプリケーション(ブラウザ)からドロップすることができる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 件のコメント:
コメントを投稿