How to drag items between 2 sorted lists with jQuery?

Question

Hi - I'm trying to implement drag/drop/sort between 2 list elements:

<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 the lists and sort the items in each list. What's the simplest way to implement this using jQuery?

Answer 1

jQueryUI Sortable - this is exactly what you want.

Answer 2

Very simple:

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

I've noticed that an earlier version of jQuery-UI (1.6rc5) I tried this with didn't accept the css selector for connectWith. I threw a curve and got it to work with actual jQuery elements instead:

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