HTML、CSS、および jQuery: ドラッグアンドドロップによる並べ替えを実装するための技術ガイド-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-10-24 08:12:26

オリジナル

840 人が閲覧しました

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 ページの <head> タグに挿入します:

<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 サイトの他の関連記事を参照してください。