JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のドラッグ&ドロップをJavaScriptで実装する方法【サンプルコード付き】

ドラッグ&ドロップ(Drag and Drop:DnD)は、マウス操作だけで要素のコピーや並べ替え、削除などを直感的に行える強力なユーザーインターフェースの概念です。ユーザーは対象となる要素の上でマウスボタンを押したまま別の場所へ移動(ドラッグ)し、目的の位置でボタンを離す(ドロップ)ことで操作を完了できます。

HTML5のドラッグ&ドロップで使える主なイベント

HTML5では、ドラッグ&ドロップの一連の流れに対して以下のようなイベントが用意されています。

  • dragstart:ドラッグが開始されたときに発生
  • dragenter:要素がドロップ候補の領域に入ったときに発生
  • dragover:要素の上でドラッグしている間、継続的に発生
  • drop:要素がドロップされたときに発生
  • dragend:ドラッグ操作が終了したときに発生

基本的な実装例

以下は、紫色のボックス(boxA)をドラッグしてピンク色のボックス(boxB)へ移動させるシンプルなデモです。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
      #boxA { background-color: #6633FF; width:75px; height:75px; }
      #boxB { background-color: #FF6699; width:150px; height:150px; }
    </style>

    <script>
      function dragStart(ev) {
        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.dataTransfer.setDragImage(ev.target,0,0);
        return true;
      }
    </script>
  </head>
  <body>
    <center>
      <h2>HTML5 ドラッグ&ドロップ デモ</h2>
      <div>紫のボックスをドラッグしてみてください。</div>
      <div id = "boxA" draggable = "true"
         ondragstart = "return dragStart(ev)">
        <p>ドラッグしてください</p>
      </div>
      <div id = "boxB">ゴミ箱</div>
    </center>
  </body>
</html>

コードのポイント解説

  • draggable="true":要素をドラッグ可能にするためには必須の属性です。
  • effectAllowed = 'move':許可されるドロップ操作の種類を「移動」に限定しています。
  • setData("Text", ...):ドラッグ中のデータ(ここでは要素のID)をdataTransferオブジェクトに格納し、ドロップ側で受け取れるようにします。
  • setDragImage():ドラッグ中に表示されるイメージとそのオフセット位置をカスタマイズできます。

実際にドロップを受け付けるには、受け皿となる要素側でdragover(preventDefault()の呼び出しが必要)とdropイベントをハンドリングし、getData()でデータを取得する処理を追加します。

まとめ

HTML5のドラッグ&ドロップAPIを使えば、外部ライブラリに頼ることなくネイティブのJavaScriptだけで直感的なUIを実装できます。まずはdraggable属性とdragstartイベントから試してみるのがおすすめです。

  1. 【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

    JavaScriptにおけるFileとFileReaderとは？ JavaScriptでは、<input type=file>要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。 さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。 サンプルコード 以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示し

  2. 【HTML5】ドラッグ＆ドロップ（DnD）の実装方法をサンプルコード付きで解説

    ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティ