2

I have two lists 

<ul class="sortable" id="list-A">
   <li id="1">Value 1 </li>
   <li id="2">Value 2 </li>
   <li id="3">Value 3 </li>
</ul>

<ul class="sortable" id="list-B">
   <li id="4">Value 1 </li>
   <li id="5">Value 2 </li>
   <li id="6">Value 3 </li>
</ul>

connected like this

     $( ".sortable" ).sortable({
       connectWith: '.sortable',
       placeholder: "widget-highlight"
     });

i knew how to save a one ordered list to database by saving the order but how to save if the user moves an item from list a to list b ?

i want to save the item position but how

Improve this question
2
  • What position do you want to save? The item's new position in list B? Commented Nov 23, 2012 at 1:57
  • if item moved from list A to list B the item should be saved in list B and vice versa Commented Nov 23, 2012 at 2:04

1 Answer 1

Reset to default
5

Using .sortable()'s .receive() callback, get the dropped node's .index() via ui.item.index(). How you process it in PHP will depend on how your ajax handler is setup.

$( ".sortable" ).sortable({
   connectWith: '.sortable',
   placeholder: "widget-highlight",
   // Receive callback
   receive: function(event, ui) {
     // The position where the new item was dropped
     var newIndex = ui.item.index();
     // Do some ajax action...
     $.post('someurl.php', {newPosition: newIndex}, function(returnVal) {
        // Stuff to do on AJAX post success
     });
   },
   // Likewise, use the .remove event to *delete* the item from its origin list
   remove: function(event, ui) {
     var oldIndex = ui.item.index();
     $.post('someurl.php', {deletedPosition: oldIndex}, function(returnVal) {
        // Stuff to do on AJAX post success
     });

   }
 });

The above example will send the dropped node's new list position in $_POST['newPosition']

The events are fully described in the .sortable() API documentation

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.