HTML、CSS、および jQuery: ドラッグ アンド ドロップによる並べ替えを実装するための技術ガイド

HTML、CSS、および jQuery: ドラッグ アンド ドロップによる並べ替えを実装するためのテクニカル ガイド

現代の Web デザインでは、ドラッグ アンド ドロップによる並べ替えは非常に一般的な機能です。 。ユーザーは要素をドラッグして並べ替えることができ、リアルタイム更新中に優れたユーザー エクスペリエンスを提供します。この記事では、HTML、CSS、jQueryを使用して、ドラッグ＆ドロップで簡単な並べ替え機能を実装する方法を紹介します。

始める前に、まず基本的な HTML 構造と CSS スタイルを準備する必要があります。これらは、その後のドラッグ アンド ドロップによる並べ替えの基礎となります。

HTML 構造:

<ul id="sortable">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
</ul>

CSS スタイル:

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sortable li {
  cursor: move;
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

次に、jQuery ライブラリといくつかの jQuery UI プラグインを導入する必要があります。ドラッグ アンド ドロップの並べ替えに必要なサポートを実装します。次のコードを Web ページの タグに挿入します:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

必要なコード、ライブラリ、プラグインをすべて準備したので、実装を開始できます。ドラッグアンドドロップで並べ替えます。

まず、jQuery UI の sortable() メソッドを使用して、リストをドラッグ アンド ドロップで並べ替え可能にする必要があります。 JavaScript コードに次のコードを挿入します。

$(document).ready(function() {
  $("#sortable").sortable();
});

次に、リストの並べ替えが変更されたときに更新された並べ替え結果を取得できるように、並べ替えの完了後にイベントのコールバック関数を追加する必要があります。 JavaScript コードを次のように変更します。

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  });
});

このコードでは、jQuery UI の toArray() メソッドを使用して、並べ替えられたリスト項目の ID を取得し、それをコンソールに出力します。並べ替え結果の保存やインターフェイスの表示の更新など、実際のニーズに応じて並べ替え結果をさらに処理できます。

最後に、インタラクティブ性を高めるために、並べ替え時にアニメーション効果を追加できます。 JavaScript コードを次のように変更します。

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  }).disableSelection();
});

このコードでは、jQuery UI の disableSelection() メソッドを使用して、リスト項目のテキストが選択されないようにします。

これまでに、簡単なドラッグ アンド ドロップによる並べ替え機能の実装が完了しました。必要に応じてスタイルを調整したり、削除、編集、その他の機能の追加などの機能を拡張したりできます。

概要:
この記事では、HTML、CSS、jQuery を使用してドラッグ アンド ドロップによる並べ替えを実装する例を示します。 jQuery UI の sortable() メソッドを使用すると、ドラッグ アンド ドロップでリストの並べ替えを簡単に実装でき、並べ替え完了後は簡単に並べ替え結果を取得できます。この記事がドラッグ アンド ドロップによる並べ替えの実装プロセスを理解するのに役立つことを願っています。

コード例: https://codepen.io/pen/?template=WNRZebr

以上がHTML、CSS、および jQuery: ドラッグ アンド ドロップによる並べ替えを実装するための技術ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。