HTML5 を使用して複数の要素のドラッグアンドドロップ機能を実装する方法-H5 チュートリアル-php.cn

HTML5 を使用して複数の要素のドラッグアンドドロップ機能を実装する方法

不言

リリース： 2018-12-01 14:52:08

オリジナル

5022 人が閲覧しました

HTML5 のドラッグアンドドロップ機能を使用すると、HTML ページ要素をドラッグアンドドロップできます。前の記事では、単一の要素をドラッグアンドドロップできるコードを紹介しました。次回は、複数の要素をドラッグ＆ドロップするコードを紹介します。

HTML5 を使用して複数の要素のドラッグアンドドロップ機能を実装する方法

早速、例を直接見てみましょう

例 1: UL タグを使用して複数の要素をドラッグアンドドロップする

コードは次のとおりです:

ListDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ListDragDrop.css"/>
  <script>
    function load() {      
      var delbox = document.getElementById(&#39;del&#39;);
      delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
      delbox.addEventListener(&#39;drop&#39;, onDrop, false);      
      var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);      
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
        el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      }
    }    
function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }    
function onDragOver(e) {
      e.preventDefault();
    }    
function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();      
      var eid = e.dataTransfer.getData(&#39;text&#39;);      
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }  
</script>
</head>
<body onload="load();">
   <div id="del">删除</div>
    <ul id="list1">
      <li id="1">海豚</li>
      <li id="2">鲸鱼</li>
      <li id="3">企鹅</li>
      <li id="4">北极熊</li>
      <li id="5">雪狐</li>
    </ul>
    </ul>
</body>
</html>

ログイン後にコピー

ListDragDrop.css

#del{
  width:120px;  
  height:60px;  
  border: solid 2px #ff6a00;
  }
ul#list1 > li {
  display: block;  
  width: 150px;  
  border: 1px solid #808080;
  }

ログイン後にコピー

説明:

読み込みを実行します。ページがロードされたときに機能します。ロード関数の次のコードは、ドラッグオーバーイベントとドロップイベントを [削除] div に割り当てます。要素が [削除] ボックスにドラッグされると onDragOver 関数が呼び出され、要素が削除されると onDrop 関数が呼び出されます。

var delbox = document.getElementById(&#39;del&#39;);
  delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
  delbox.addEventListener(&#39;drop&#39;, onDrop, false);

ログイン後にコピー

querySelectorAll メソッドを呼び出して、ul タグの li 要素を取得します。 for ループは、で取得した要素の配列を繰り返し処理し、各要素の「ドラッグ可能」属性を true に設定します。この処理により、ドラッグ可能なオブジェクトとして設定されます。また、ドラッグスタートイベントも割り当てます。

var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);  
for (var i = 0; i < elems.length; i++) {
    el = elems[i];
    el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
    el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
  }

ログイン後にコピー

リスト項目をドラッグすると、次の onDragStart 関数が呼び出されます。 dataTransfer オブジェクトの setData メソッドを呼び出して、要素の ID を dataTransfer オブジェクトに保存します。

function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }

ログイン後にコピー

リスト内の項目がドラッグアンドドロップ領域にドラッグされると、次の onDragOver 関数が呼び出されます。 DragOver には特別な処理がないため、PreventDefault メソッドを呼び出してイベントをキャンセルします。

function onDragOver(e) {
      e.preventDefault();
    }

ログイン後にコピー

ドラッグアンドドロップ領域内でリストの項目が削除された場合、onDrop 関数を呼び出すことができます。 stopPropagation メソッドを呼び出して、イベント処理をキャンセルします。次に、dataTransfer オブジェクトから ID を取得します。 IDを取得することで、ドロップゾーンにドロップされた要素を取得できます。 getElementById メソッドを呼び出し、ID から LI タグ付きオブジェクトを取得します。取得したLIオブジェクトのparentNodeプロパティを使用して親ノードにアクセスし、removeChildメソッドを呼び出すことで、破棄リストの項目が削除されます。

function onDrop(e) {      
if (e.stopPropagation) e.stopPropagation();      
var eid = e.dataTransfer.getData(&#39;text&#39;);      
var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

ログイン後にコピー

実行結果:

Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。

HTML5 を使用して複数の要素のドラッグアンドドロップ機能を実装する方法