How to drag items from 2 sorted lists using jQuery?

Question

I am trying to implement drag / drop / sort between two list items:

<ul id="first">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul id="second">
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>

Basically, I just want to be able to pass items between lists and sort items in each list. What is the easiest way to implement this with jQuery?

Answer 1

Very simple:

<script>
  $(function() {
    $('#first').sortable( { connectWith : '#second' });
    $('#second').sortable( { connectWith : '#first' });
  });
</script>

I noticed that the earlier version of jQuery-UI (1.6rc5) I tried did not accept the css selector for connectWith. I threw the curve and made it work with real jQuery elements:

<script>
  $(function() {
    $('#first').sortable( { connectWith : $('#second') });
    $('#second').sortable( { connectWith : $('#first') });
  });
</script>

Answer 2

jQueryUI Sortable is exactly what you want.