Как обновить позицию элемента списка в jquery сортируемом пользовательском интерфейсе, используя php ajax

Question

Я новичок в jquery сортируемом, поэтому ссылаюсь на этот урок.

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

, но выше урок демонстрирует элемент списка сортировки в одном элементе div, т.е. элемент будет сортироваться (менять свою позицию) в пределах того же элемента div, но я должен отсортировать элемент списка от первого до второго, аналогично переместить элемент из второго в 3-й. но в моем случае все 3 div находятся рядом и имеют одинаковый идентификатор, так что, как работать с jquery сортируемым с использованием php ajax с несколькими div (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 () просто перетаскивает и вы можете вызвать его, разделив запятую всеми вашими идентификаторами, например

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

, функция инициализирует сортируемое, а также перетаскивание,

вызовы ajax до вас, Вы можете иметь один или как угодно, для моего сценария у меня было 2 разных, потому что я сохраняю порядок в дБ, и у меня много сортируемых элементов в моем представлении, и у меня есть другой тип данных, значит, в одном списке у меня есть данные из 2 3 разных таблиц БД, для вашего понимания, так что используйте его по-своему

<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>

Я надеюсь, что это полезно.