如何使用php ajax更新可排序jquery ui中列表项的位置

Question

我对jquery可排序并不熟悉，因此请参考本教程。

http://codingpassiveincome.com/jquery-ui-sortable-tutorial-save-positions-with-ajax-php-mysql

但以上教程演示了单个div中的排序列表项，即该项将在同一div中进行排序（更改其位置），但我的要求是将列表项从第一div排序至第二div，类似地将项目从第二div移至第三div 。但在我的情况下，所有3个div并排且具有相同的id，因此如何使用具有多个div的php ajax对jQuery进行排序（div并排）

Html code:

<div>                       <div>                      <div>           
<ul id="sortable1">          <ul id="sortable1">         <ul id="sortable1">
<li>list item 1</li>          <li>list item 11</li>       <li>list item 21</li>  
<li>list item 2</li>          <li>list item 12</li>       <li>list item 22</li>
<li>list item 3</li>          <li>list item 13</li>       <li>list item 23</li>
<li>list item 4</li>          <li>list item 14</li>        <li>list item 24</li>
</ul>                        </ul>                       </ul>
</div>                      </div>                      </div>

Answer 1

您可以看下面的代码，我有相同的情况，所以我做了类似的事情，因为您有可用的不同事件，可以使用您的方式，

dnd（）函数只是拖放操作，您可以使用所有ID逗号分隔来调用它，例如

dnd('#sortable_1,#sortable_2,#sortable_3')

该函数将初始化可排序对象，还可以拖放，

ajax调用由您决定，您可以选择一个或任意一个，对于我的情况，我有2种不同的选择，因为我将订单保存在db中，并且在我的视图中有很多可排序的项目，并且我有不同的类型data，表示在同一列表中，我有2 3个不同db表中的数据，因此请您理解，以您自己的方式使用]

<script>
 function dnd(all_ids) {
        var scrollTo = null;
        var adjustment;
        var fromposition = toposition = from = to = type = taskid = istask = '';
        var adjustment;
        $(all_ids).sortable({
            scroll: true,
            scrollSensitivity: 100,
            scrollSpeed: 60,
            helper: 'original',
            connectWith: ".connectedSortable",
            start: function (event, ui) {
                fromposition = ui.item.index();
                from = $(this).attr('data-fromid');
                type = $(event.target).attr('data-type');
                taskid = $(ui.helper[0]).attr('data-taskid');
                istask = $(ui.helper[0]).attr('data-istask');
            },
            update: function (event, ui) {
                to = $(event.target).attr('data-fromid');
            },
            stop: function (event, ui) {
//                console.log('end');
                /* Send JSON to the server */
                // this is just to show, how you get all items if you want 
                var id_array = [];
                var sort_array = [];
                $(ui.item).parent().find('li').each(function () {
                    sort_array.push($(this).attr('data-hwforder')); // these are my custom data attr
                    id_array.push($(this).attr('data-taskid'));
                });
                sort_array.sort((a, b) => a - b);
                // end 
                // dragtype and drag are also custom variables, 
                if ((from !== to) && type && from && to) {
                    // different column
                    $.ajax({
                        url: "/update-different-column",
                        type: 'post',
                        data: {from: from, to: to, fromposition: fromposition, toposition: toposition, type: type,
                            sort_array: sort_array, drag: 'crosscolumn', drop_type: 'column'},
                        async: true,
                        success: function (data) {
                            // success
                        }
                    });//ajax end
                } else {
//                  same column
                    $.ajax({
                        url: "/update-same-column",
                        type: 'post',
                        data: {from: from, to: to, fromposition: fromposition, toposition: toposition, type: type,
                             sort_array: sort_array, drag: 'column'},
                        async: true,
                        success: function (data) {
                            // success
                        }
                    });//ajax end
                }

            },
        });
    }
</script>

我希望它会有所帮助。