Geek Answers Handbook

JQuery Sortable - keep order when inserting new item into list

I have two sortable lists that contain work orders. The second list is Route , and the first is a list of all work orders that have not been added to the Route list. The idea is that the user drags work orders in Route in a certain order, rebuilding work orders to create a route that the employee will follow.

My problem is managing the position of new work orders being dragged into the Route list. Is there an easy way to handle updating the positions of all list items (on the side of the things database via ajax calls) as new items are added?

A little more information for clarity ...

When the Route list is empty (work orders have not yet been added), the user simply drags the new work order to the empty list, an ajax call made to save the information (in the base records on the server) as a Route and only a Route Item .

When a user drags the second order of work into the Route list, I want to determine whether the new order of work will become first in the list or second, and then update all the information (server side) for all elements in the list, respectively. Everything becomes very complicated when I want to add a new work order to Route , which already has 30 work orders.

Is there an easy way to do this or is it just a matter of coding a decent amount of jQuery and backend functions to manage this? I hunted for a network for solutions, but I can’t find anything so definitive.

+7
source share
2 answers

Is there an easy way to do this or is it just a coding issue a decent amount of jQuery and backend functions to manage this? I have hunted for a network for solutions, but can’t find anything that’s final.

Pretty much yes, but if you already know how to handle Ajax calls for sorters, then mixing the two lists is not a problem. I am using a modified version of the code for this page . And I use receive event and stop event to show how you can connect a simple function to the main sortable encoding:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable", receive: function( event, ui ) { alert('Receive!'); }, stop: function( event, ui ) { alert('Stop!'); } }).disableSelection(); }); </script> </head> <body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </body> </html>

So when the item is sorted and the sorting stops, "Stop!" A warning window will appear. And when a new item is dragged into one list from another, "Get!" a warning appears in addition to stopping. Maybe you can just use the stop event to trigger an Ajax call, but receive may even be useful to do something else if / when a new item is added to the list.

+4
source

You can keep the order of each column every time there is an update using ajax call. JSFiddle working example

Explanation below: To do this, you need to provide each of the items to be sorted with a unique identifier. For example:

  <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default" id='item1'>Item 1</li> <li class="ui-state-default" id='item2'>Item 2</li> <li class="ui-state-default" id='item3'>Item 3</li> <li class="ui-state-default" id='item4'>Item 4</li> <li class="ui-state-default" id='item5'>Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight" id='item6'>Item 6</li> <li class="ui-state-highlight" id='item7'>Item 7</li> <li class="ui-state-highlight" id='item8'>Item 8</li> <li class="ui-state-highlight" id='item9'>Item 9</li> <li class="ui-state-highlight" id='item10'>Item 10</li> </ul>

You can then capture the identifier of each sortable string li and return, which is executed in the ajax request.

  $(function () { $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", update: function () { var order1 = $('#sortable1').sortable('toArray').toString(); var order2 = $('#sortable2').sortable('toArray').toString(); alert("Order 1:" + order1 + "\n Order 2:" + order2); //Just showing update $.ajax({ type: "POST", url: "/echo/json/", data: "order1=" + order1 + "&order2=" + order2, dataType: "json", success: function (data) { } }); } }).disableSelection(); });

You can then complete the process to save the order on the page on which you are performing the request.

+8
source

More articles:


All Articles