How to update position of list item in jquery ui sortable using php ajax

Question

I am new to jquery sortable so referring this tutorial.

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

but above tutorial demonstrate sort list item in single div ie item will be sort(change its position) within same div, but my requirement is to sort list item from first div to second div,similarly move item from second div to 3rd div. but in my case all 3 div are side by side and have same id, so how to work with jquery sortable using php ajax with multiple div (div are side by side)

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

you can look at the following code, i had the same case so i made something like this, as you have different events available which you can use your way,

the dnd() function is just drag and drop, you can call it with all your ids comma separated like

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

the function will initialize the sortable and also drag and drop,

the ajax calls are upto you, you can have one or anyway you want, for my scenario i had 2 different, because i save the order in db, and i have many sortable items in my view, and i have different type of data , means in same list i have data from 2 3 different db tables, its for your understanding so,use it you own way

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

I hope it is helpful.