HTML5-ドラッグアンドドロップ

ドラッグアンドドロップ（DnD）は強力なユーザーインターフェイスの概念であり、マウスクリックの助けを借りて、アイテムのコピー、並べ替え、削除を簡単に行うことができます。これにより、ユーザーは要素の上でマウスボタンをクリックして押したまま、別の場所にドラッグし、マウスボタンを放して要素をドロップできます。

従来のHTML4でドラッグアンドドロップ機能を実現するには、開発者は複雑なJavaScriptプログラミングまたはjQueryなどの他のJavaScriptフレームワークを使用する必要があります。

HTML 5は、ブラウザにネイティブDnDサポートを提供するドラッグアンドドロップ（DnD）APIを考案し、コーディングをはるかに容易にしました。

HTML 5 DnDは、Chrome、Firefox 3.5、Safari 4などのすべての主要ブラウザでサポートされています。

ドラッグアンドドロップイベント

ドラッグアンドドロップ操作のさまざまな段階で発生するイベントがいくつかあります。これらのイベントは以下のとおりです-

Sr.No.	Events & Description
1	dragstart ユーザーがオブジェクトのドラッグを開始すると発生します。
2	dragenter ドラッグ中にマウスが最初にターゲット要素上に移動したときに発生します。このイベントのリスナーは、この場所でのドロップが許可されているかどうかを示す必要があります。リスナーがない場合、またはリスナーが操作を実行しない場合、デフォルトではドロップは許可されません。
3	dragover このイベントは、ドラッグが発生しているときにマウスが要素上を移動すると発生します。ほとんどの場合、リスナー中に発生する操作はdragenterイベントと同じです。
4	dragleave このイベントは、ドラッグ中にマウスが要素を離れると発生します。リスナーは、ドロップフィードバックに使用される強調表示または挿入マーカーを削除する必要があります。
5	drag オブジェクトのドラッグ中にマウスが移動するたびに発生します。
6	drop ドロップイベントは、ドラッグ操作の終了時にドロップが発生した要素で発生します。リスナーは、ドラッグされているデータを取得し、ドロップ位置に挿入する責任があります。
7	dragend ユーザーがオブジェクトのドラッグ中にマウスボタンを離したときに発生します。

注-ドラッグイベントのみが発生することに注意してください。 _mousemove_などのマウスイベントは、ドラッグ操作中に発生しません。

DataTransferオブジェクト

すべてのドラッグアンドドロップイベントのイベントリスナーメソッドは、 dataTransfer と呼ばれる読み取り専用属性を持つ Event オブジェクトを受け入れます。

*event.dataTransfer* は、次のようにイベントに関連付けられた *DataTransfer* オブジェクトを返します-

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

_DataTransfer_オブジェクトは、ドラッグアンドドロップ操作に関するデータを保持します。このデータは、以下で説明するように、DataTransferオブジェクトに関連付けられたさまざまな属性に関して取得および設定できます-

Sr.No.	DataTransfer attributes and their description
1	dataTransfer.dropEffect [ = value ] 現在選択されている操作の種類を返します。この属性を設定して、選択した操作を変更できます。 *可能な値は、なし、コピー、リンク、および移動です。
2	dataTransfer.effectAllowed [ = value ]* 許可される操作の種類を返します。この属性を設定して、許可される操作を変更できます。可能な値は、 none、copy、copyLink、copyMove、link、linkMove、move、all 、および uninitialized です。
3	dataTransfer.types dragstartイベントで設定された形式をリストするDOMStringListを返します。さらに、ファイルがドラッグされている場合、タイプの1つは文字列「Files」になります。
4	dataTransfer.clearData ( [ format ] ) 指定された形式のデータを削除します。引数が省略された場合、すべてのデータを削除します。
5	dataTransfer.setData(format, data) 指定されたデータを追加します。
6	data = dataTransfer.getData(format) 指定されたデータを返します。そのようなデータがない場合は、空の文字列を返します。
7	dataTransfer.files ドラッグされているファイルのFileListを返します（存在する場合）。
8	dataTransfer.setDragImage(element, x, y) 指定された要素を使用してドラッグフィードバックを更新し、以前に指定されたフィードバックを置き換えます。
9	dataTransfer.addElement(element) ドラッグフィードバックのレンダリングに使用される要素のリストに、指定された要素を追加します。

ドラッグアンドドロッププロセス

以下は、ドラッグアンドドロップ操作を実装するために実行する手順です-

手順1-オブジェクトをドラッグ可能にする

ここに取るべき手順があります-

要素をドラッグする場合は、その要素の draggable 属性を true に設定する必要があります。
ドラッグされるデータを保存する dragstart のイベントリスナーを設定します。
イベントリスナー dragstart は、許可される効果（コピー、移動、リンク、またはいくつかの組み合わせ）を設定します。

以下は、オブジェクトをドラッグ可能にする例です-

<!DOCTYPE HTML>

<html>
   <head>

      <style type = "text/css">

         #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 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 HTML5 demo</h2>
         <div>Try to drag the purple 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>

これは、次の結果を生成します-

ステップ2-オブジェクトのドロップ

ドロップを受け入れるには、ドロップターゲットが少なくとも3つのイベントをリッスンする必要があります。

dragenter イベント。ドロップターゲットがドロップを受け入れるかどうかを決定するために使用されます。ドロップを受け入れる場合は、このイベントをキャンセルする必要があります。
dragover イベント。ユーザーに表示するフィードバックを決定するために使用されます。イベントがキャンセルされると、dropEffect属性の値に基づいてフィードバック（通常はカーソル）が更新されます。
最後に、実際のドロップを実行できる drop イベント。

以下は、オブジェクトを別のオブジェクトにドロップする例です-

<html>
   <head>
      <style type="text/css">
         #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 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 HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>