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();」を忘れないように記述してください。

JavaScript入門