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

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

ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。

従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。

ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティブにドラッグ＆ドロップをサポートするようになりました。これにより、開発者はごくシンプルなコードでDnD機能を実装できるようになっています。

HTML5でドラッグ＆ドロップを実装する手順

HTML5でドラッグ＆ドロップを実装するには、大きく分けて次の2つのステップを踏みます。

ステップ1：オブジェクトをドラッグ可能にする

まず、ドラッグしたい要素に対して draggable="true" 属性を設定し、その要素を「ドラッグ可能な状態」にします。

続いて、dragstart イベントのリスナーを登録し、ドラッグ対象のデータを保存します。このイベントリスナー内では、許可する操作の種類（copy＝コピー、move＝移動、link＝リンク、あるいはそれらの組み合わせ）も指定できます。

サンプルコード1：ドラッグできるボックスを作る

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         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>Drag and drop in HTML5</h2>
         <div>Try to drag the green box around.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB">Dustbin</div>
      </center>
   </body>
</html>

このコードでは、緑色のボックス（boxA）に draggable="true" を設定し、ドラッグ開始時に dataTransfer オブジェクトへ要素のIDを格納しています。effectAllowed='move' により、この要素は「移動」操作のみを許可する設定になっています。

ステップ2：オブジェクトをドロップできるようにする

ドロップを受け入れる側（ドロップターゲット）は、少なくとも次の3つのイベントを監視する必要があります。

  • dragenter： ドロップターゲットがドロップを受け入れるかどうかを判定するイベントです。ドロップを受け入れる場合は、このイベントをキャンセル（preventDefault）します。
  • dragover： ユーザーにどのようなフィードバック（ドロップ可否の見た目など）を表示するかを決定するために使用します。
  • drop： 要素が実際にドロップされたときに実行され、受け取ったデータをもとに移動処理などを行います。

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

以下は、緑色のボックスを青色のボックスの中へ移動させる完全なサンプルコードです。

サンプルコード2：要素をドロップ先に移動させる

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
             ev.dataTransfer.effectAllowed='move';
             ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
             ev.dataTransfer.setDragImage(ev.target,0,0);
             return true;
          }
          function dragEnter(ev) {
             event.preventDefault();
             return true;
          }
          function dragOver(ev) {
             return false;
          }
          function dragDrop(ev) {
             var src = ev.dataTransfer.getData("Text");
             ev.target.appendChild(document.getElementById(src));
             ev.stopPropagation();
             return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop in HTML5</h2>
         <div>Try to move the green box into the blue box.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(ev)"
            ondrop="return dragDrop(ev)"
            ondragover="return dragOver(ev)">Dustbin
         </div>
      </center>
   </body>
</html>

まとめ

HTML5のDnD APIを使えば、draggable 属性と dragstart・dragenter・dragover・drop といった一連のイベントを組み合わせるだけで、jQueryなどの外部ライブラリに頼らずにドラッグ＆ドロップ機能を実装できます。ファイルアップロード画面や並べ替え可能なリストUIなど、さまざまな場面で応用できるので、ぜひ実際にコードを動かしながら挙動を確認してみてください。

  1. iOS 11のドラッグ&ドロップ完全ガイド|ファイル移動からホーム画面整理まで

    iOS 11のドラッグ&ドロップとは?ドラッグ&ドロップは、iOS 11でiPhoneとiPadに搭載された新機能です。PCやMacで長年提供されてきた機能をさらに進化させたもので、その操作は驚くほどシンプル。移動したいアイテムを長押しすれば、そのアイテムが指先に「ピン留め」され、もう一方の手で画面をスワイプして好きな場所にドロップするだけです。iPhoneでは同一アプリ内でのドラッグ&ドロップに限定されていますが、この機能が真価を発揮するのはiPadです。iPadではアプリ間でアイテムをやり取りできるだけでなく、複数のアプリ自体をまとめて移動することなども可能になっています。以下では、iOS

  2. Macでドラッグ&ドロップができないときの対処法を徹底解説

    Macのドラッグ&ドロップ機能は、日々の操作に欠かせない存在となっています。Finderやさまざまなアプリケーションでのファイル操作をスムーズにしてくれる便利な機能ですが、Macでドラッグ&ドロップが突然できなくなると、作業効率に大きな支障が出てしまいます。この問題は頻繁に発生するものではありませんが、実際に一部のmacOSユーザーから「ファイルや写真をドラッグ&ドロップできなくなった」という報告が寄せられています。本記事では、Macでドラッグ&ドロップが機能しなくなる原因を解説し、具体的な解決策を順番にご紹介します。目次1. トラブルシューティング前の基本チェック2. Finderアプリを再