マイナー・マイナー

隠れた名作の発掘が生きがい。

A要素をB要素にドラッグ＆ドロップして、A要素のテキストをB要素にコピーする

JavaScript

スポンサードリンク

HTML5のDrag and Drop APIを利用して、ドラッグ＆ドロップでテキストをコピーする処理をメモしました。A要素をB要素にドラッグ＆ドロップすることで、B要素のテキストをA要素のテキストで置き換えるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
     <head>
          <meta charset="utf-8">
          <title>ドラッグ＆ドロップで要素の持つテキストをコピー</title>
          <script type="text/javascript">
               // ドラッグ時のハンドラ
               function dragHandler(event) {
                    // ドラッグ元のテキストをDataTransferオブジェクトに保持
                    var orgText = event.target.innerHTML;
                    event.dataTransfer.setData("text", orgText);
               }
              
               // ドロップ時のハンドラ
               function dropHandler(event) {
                    // デフォルト処理のキャンセル
                    event.preventDefault();
                   
                    // DataTransferオブジェクトからテキストを取得してドラッグ先のテキストに代入
                    var orgText = event.dataTransfer.getData("text");
                    event.target.innerHTML = orgText;
               }
          </script>
     </head>
     <body>
          <div id="A" draggable="true" ondragstart="dragHandler(event);">[A]</div>
          <div id="B" ondragover="event.preventDefault();" ondrop="dropHandler(event);">[B]</div>
     </body>
</html>


ドラッグ開始、ドロップ実施が行われた時、それぞれdragHandler、dropHandlerを呼び出しています。dragHandlerでA要素のテキストを保持し、dropHandlerで保持したテキストをB要素のテキストに代入しています。


ドラッグ＆ドロップ中のデータ保持にはDataTransferオブジェクトを利用しています。データの保持、取得はそれぞれsetData、getDataで行います。setTransferの第一引数はデータのタイプを指定します。プレーンなテキストであれば"text/plain"(単なる"text"でも可)、HTMLであれば"text/html"を指定します。


ドラッグ＆ドロップ操作で、イベントはdragstart、dragover、dropの順番で発生しそうですが、dragoverでは明示的にデフォルト処理をキャンセルしないとdropイベントが発生しないようです。ondragoverでevent.preventDefault();をしているのはそのためです。