JavaScript: Drag & Drop API でテキストを D & D する
HTML5 の Drag & Drop API を使って、テキストをドラッグ&ドロップしてみます。
データのドラッグ&ドロップは、dataTransfer オブジェクトの getData() メソッドを使うと実現できます。
適当にどこかのテキストを選択して、下の黒枠線内(div 要素)にドラッグ&ドロップしてみてください。 そのテキストが黒枠線内(div 要素)に表示されます。
テキストは、このドキュメント内のテキストでもいいですし、 ブラウザとは別の、テキストエディタ等に記述しているテキストもドラッグ&ドロップできます。
コード解説
テキストのドラッグ&ドロップのコードは次のようになっています。
<div id="drop"></div>
<style>
#drop {
border: 1px solid black;
width: 300px;
height: 100px;
padding: 3px;
}
</style>
<script>
var drop = document.getElementById('drop');
// drop側
drop.addEventListener('dragover', function(e){
e.preventDefault();
}, false);
drop.addEventListener('drop', function(e){
e.preventDefault();
e.target.textContent = e.dataTransfer.getData('text');
}, false);
</script>
ドラッグ&ドロップ時のデータの受け渡しは DataTransfer オブジェクトで行います。 そして、データを取得する場合は getData() メソッドを使い、引数としてデータのタイプを指定します。
今回はプレーンテキストを受け取りますので、'text' と指定しています。 'text/plane' でも構いません。
受け取ったテキストをドロップ側の div 要素の textContent に設定しています。
drop 時と dragover 時の 「e.preventDefault();」を忘れないように記述してください。