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 i.e 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>

does it have to be jquery ? why do you not use php instead of jquery if you dont mind !? do you want the sort be by name ? — Mohsen TOA
– Mohsen TOA, Commented Jan 9, 2020 at 13:03
you need to define diff id for all ul, and use connecwith like here and then you have to check the position, to, from, etc — Ahmed Sunny
– Ahmed Sunny, Commented Jan 9, 2020 at 13:11

Ahmed Sunny · Accepted Answer · 2020-01-09 13:30:41Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related