jQuery UI Sortable 和資料庫整合

使用 jQuery UI Sortable，您可以讓使用者重新排列元素並保持特定的順序。若要將此功能與資料庫集成，您可以結合使用序列化方法和 AJAX 或表單提交。

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

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

透過利用 HTML 結構，例如：

   

   

   ...

序列化方法將產生一個查詢字串，例如：item[]=1&item[]=2，其中每個值代表重新排列的元素的 ID。

假設您的資料庫ID 與元素 ID 匹配，然後您可以循環遍歷 POST 資料並使用新位置更新相應的資料庫記錄。

$i = 0;

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

將 jQuery UI Sortable 與資料庫整合可讓您動態維護物件的順序，為排序和持久化提供使用者友善的介面。