Question

I need to set up a sortable such that when an element of index X is dragged and resorted the corresponding element in the other list should also be sorted. Assume that both lists have equal number of elements at all times. How can I do it with jquery sortable?

Like for the following list:

<ul id="fruits">
  <li>Apple</li>
  <li>Cars</li>
  <li>Money</li>
</ul>

<ul id="stuff">
  <li> keeps doctors away</li>
  <li> have wheels</li>
  <li> makes the world go round</li>
</ul>

Answer 1

I don’t believe that Jquery Ui sort supports this directly, you could use the callback functions when sorting to trigger your own manual sort of the other list.

$( "#fruits" ).sortable({
  stop: function(event, ui){ 
    //manual sort here
  }
});