JavaScript はページ要素のドラッグ アンド ソート機能をどのように実装しますか?

JavaScript ページ要素のドラッグと並べ替え機能を実装するにはどうすればよいですか?

現代の Web 開発では、ドラッグ ソートは非常に一般的な機能であり、ユーザーは要素をドラッグしてページ上の位置を変更できます。この記事では、JavaScript を使用してページ要素のドラッグ アンド ソート機能を実装する方法と、具体的なコード例を紹介します。

ドラッグ ソート機能の実装の基本的な考え方は次のとおりです。

1. まず、HTML でドラッグ ソートが必要な要素 (セットなど) を作成します。ディビジョンの

   <div class="sortable">元素1</div>
   <div class="sortable">元素2</div>
   <div class="sortable">元素3</div>
   <div class="sortable">元素4</div>

   ログイン後にコピー

2. CSS を使用してこれらの要素をドラッグ可能にします:

   .sortable {
     cursor: grab;
   }

   ログイン後にコピー

3. 各ドラッグ可能な要素にイベント リスナーをバインドし、ドラッグの開始とドラッグ プロセスを監視します。およびドラッグ終了イベント:

   const sortables = document.querySelectorAll('.sortable');
   let draggingElement = null;
   
   sortables.forEach(sortable => {
     sortable.addEventListener('dragstart', dragStart);
     sortable.addEventListener('dragover', dragOver);
     sortable.addEventListener('dragend', dragEnd);
   });

   ログイン後にコピー

4. ドラッグされた要素をドラッグ開始イベントに保存し、ドラッグ効果を設定します:

   function dragStart(e) {
     draggingElement = this;
     this.classList.add('dragging');
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', this.innerHTML);
   }

   ログイン後にコピー

5. デフォルトの動作を防止しますドラッグプロセスイベントでドラッグ効果を設定します:

   function dragOver(e) {
     e.preventDefault();
     this.classList.add('dragover');
     e.dataTransfer.dropEffect = 'move';
   }

   ログイン後にコピー

6. ドラッグ終了イベントの要素の位置を更新し、ドラッグ関連のスタイルを削除します:

   function dragEnd(e) {
     this.classList.remove('dragging', 'dragover');
   
     const dropzone = document.querySelector('.dragover');
     if (dropzone && dropzone !== this) {
    const parentNode = this.parentNode;
    parentNode.insertBefore(this, dropzone.nextSibling);
     }
   
     draggingElement = null;
   }

   ログイン後にコピー

上記のコードを使用すると、ページ要素の単純なドラッグ アンド ソート機能を実装できます。ユーザーが要素をドラッグすると、他の要素の位置が自動的に調整され、要素の順序を変更できるようになります。

上記の例では、HTML5 ドラッグ アンド ドロップ API を使用してドラッグ ソート機能を実装しました。ドラッグ アンド ドロップ API には、要素に対するドラッグ アンド ドロップ操作の処理に役立つ一連のドラッグ アンド ドロップ関連のイベントとメソッドが含まれています。

上記の例のコードは単にドラッグ ソート機能を実装しているだけであることに注意してください。実際のアプリケーションでは、多数の要素のソート、ネストされた要素のソートなど、いくつかの特殊な状況を考慮する必要がある場合があります。等。また、ブラウザごとにドラッグ アンド ドロップ API の互換性が異なるため、開発者は互換性処理を実行する必要がある場合があります。

要約すると、JavaScript はドラッグ アンド ドロップ API を通じてページ要素のドラッグ アンド ソート機能を実装できます。上記の例がお役に立てば幸いです。

以上がJavaScript はページ要素のドラッグ アンド ソート機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。