jQuery UI Sortable を使用してドラッグ アンド ドロップでデータベースの順序を更新するにはどうすればよいですか?

jQuery UI のソート可能なデータベース統合

jQuery UI のソート可能な機能を使用すると、ユーザーは要素の順序を操作できます。これらの変更を

ソリューション

jQuery UI Sortable には、このプロセスを合理化する組み込みの Serialize() メソッドが含まれています。次の例は、要素の位置の変更時に更新された順序をデータベースに書き込む方法を示しています。

$('#sortable').sortable({
  axis: 'y',
  update: function (event, ui) {
    var data = $(this).sortable('serialize');

    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});

Serialize メソッド

serialize() メソッドは、次の配列を作成します。 id 属性を使用して並べ替え可能な要素。この配列は、$.post() 関数または $.ajax() 関数を使用してバックエンドに渡され、指定された URL に POST リクエストを送信します。

バックエンド処理

バックエンドでは、POST クエリ文字列を処理して新しい注文を抽出できます。通常、各要素 ID はデータベース ID に対応しており、便利なデータベース更新が可能です。

PHP でのデータベース更新の例:

$i = 0;

foreach ($_POST['item'] as $value) {
  // Execute statement:
  // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
  $i++;
}

jQuery UI Sortable の Serialize( ) メソッドとバックエンド処理を使用すると、動的な注文操作とデータベース同期を簡単に実装でき、データベース駆動型のユーザー インタラクションを強化できます。アプリケーション。

以上がjQuery UI Sortable を使用してドラッグ アンド ドロップでデータベースの順序を更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。