Html 如何使用jquery对laravel中的无序列表进行排序

我有一个由复选框组成的表单。每个复选框都有自己的值（值1、值2、值3、值4）。提交表单后，根据用户选择的复选框，值存储在数据库中

因此，如果用户选中第一个和第三个复选框，则存储在db中的值将采用“value1，value3”格式

现在，我想为用户提供排序选项。所以，若用户选中复选框，其值应显示在下面的列表中，然后用户应能够根据自己的偏好对值进行上下排序

我通过使用jquery和ajax部分实现了它

$("input[type='checkbox']").change(function(){
    var data = $('#form').serializeArray();
    $.ajax({
        url: "{{URL::action('CategoryController@checkboxAjaxRequest')}}",
        type: "GET",
        data: {data: data},
        success: function(response){
            $("ul #sortable").html(response);               
        }
    });
});

返回的响应的格式为

<li id="item-value1" style="cursor: pointer;">Value 1</li>
<li id="item-value2" style="cursor: pointer;">Value 2</li>

我创建了一个隐藏的输入，其值由排序的列表顺序填充，并使用此输入来检查和存储复选框

所以，现在用户可以选择复选框，然后对其进行排序

一切都很好，但有一个问题。如果用户选中某个复选框，然后将列表作为其首选项排序，然后再次选中另一个复选框，则已排序的列表将重置。所以用户必须从头开始重新排序

---

我尝试了各种方法来解决这个问题，但都没能解决这个问题。有什么解决方案吗？

您应该以某种方式在数据库中存储排序顺序。在不知道这些复选框的数据是如何存储的情况下，很难说最好的方法，但可能像排序顺序列一样简单。然后，在sortable.stop函数调用中，需要添加一个ajax调用，以将排序顺序提交给数据库。例如，如果您有一个排序顺序列，那么您将更新这些值。如果您有需要持久化的DOM更改，那么您必须注意保持后端和前端与ajax调用同步。

在将数据发送到排序列表之前，您需要进行检查。如果已经存在，则将该li扩展到当前列表。

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

        $("input[id='opt_sort']").attr('value', data);
    }
 });