CODEWITHSUNDEEP
phpmysqlajaxjquery-ui
anon
anon

Reputation:

jquery ui sortable saving connectWith lists to mysql database php

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

Upvotes: 2

Views: 3401

Answers (1)

Michael Berkowski
Michael Berkowski

Reputation: 270609

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

Upvotes: 5

Related Questions