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

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

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

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

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

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

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

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

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

DataTransferオブジェクト

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

ザ・ event.dataTransfer 戻り値 DataTransfer 次のようにイベントに関連付けられたオブジェクト-

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

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

シニア番号	DataTransfer属性とその説明
1	dataTransfer.dropEffect [ = value ] 現在選択されている操作の種類を返します。この属性を設定して、選択した操作を変更できます。可能な値は、none、copy、link、およびmoveです。
2	dataTransfer.effectAllowed [ = value ] 許可される操作の種類を返します。この属性を設定して、許可される操作を変更できます。可能な値は次のとおりです。 none, copy, copyLink, copyMove, link, linkMove, move, all そして uninitialized。
3	dataTransfer.types ドラッグスタートイベントで設定されたフォーマットをリストするDOMStringListを返します。さらに、ファイルがドラッグされている場合、タイプの1つは文字列「ファイル」になります。
4	dataTransfer.clearData ( [ format ] ) 指定された形式のデータを削除します。引数を省略した場合、すべてのデータを削除します。
5	dataTransfer.setData(format, data) 指定したデータを追加します。
6	data = dataTransfer.getData(format) 指定されたデータを返します。そのようなデータがない場合は、空の文字列を返します。
7	dataTransfer.files ドラッグされているファイルがある場合は、そのファイルリストを返します。
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>

これにより、次の結果が生成されます-