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

HTML5でドラッグアンドドロップを使用するにはどうすればよいですか？

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

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

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

ドラッグアンドドロップを実装する方法

ドラッグアンドドロップを実装するには、2段階のプロセスに従う必要があります。

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

HTML5でドラッグアンドドロップを実装するには、まず、オブジェクトをドラッグ可能にする必要があります

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

例 

<!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>

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

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

dragenterイベントは、ドロップターゲットがドロップを受け入れるかどうかを決定するために使用されます。ドロップを受け入れる場合は、このイベントをキャンセルする必要があります。ドラッグオーバーイベント。ユーザーに表示するフィードバックを決定するために使用されます。

HTML5でドラッグアンドドロップを使用するにはどうすればよいですか？

あるオブジェクトを別のオブジェクトにドロップする方法は次のとおりです

例 

<!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>

  1. iOS11でドラッグアンドドロップする方法

    ドラッグアンドドロップは、iOS 11のiPhoneとiPadに登場する新機能であり、PCとMacで何十年も利用可能であったものを改善するように見えます。非常に簡単です。ドラッグしたいアイテムを押し続けるだけで、指に固定されます。そこから、もう一方の手でディスプレイをスワイプして、目的の場所にアイテムをドロップします。 機能はiPhoneの同じアプリ内でアイテムをドラッグアンドドロップすることに制限されていますが、機能が実際に違いを生むのはiPadです。 iPadでは、アプリ間でアイテムをドラッグアンドドロップしたり、アプリ自体をドラッグアンドドロップしたりすることができます。以下のiOS1

  2. Mac でドラッグ アンド ドロップが機能しない、修正方法は?

    Mac コンピューターでドラッグ アンド ドロップ機能を使用することは、私たちの日常生活の一部になっています。この機能は、Mac Finder やその他のアプリケーションでの操作を支援します。ただし、Mac でドラッグ アンド ドロップが機能しない場合 、あなたの Mac の機能の本質のため、解決策を探す必要があります。 Mac でドラッグ アンド ドロップの機能が停止することは通常の問題ではありませんが、特定の不運な macOS ユーザーは実際にこの恐ろしい状況に遭遇しています。この投稿では、Mac でファイルや写真をドラッグ アンド ドロップできない理由を確認し、Mac のドラッグ アン