Как перетащить элементы между 2 отсортированными списками с помощью jQuery?

Question

Я пытаюсь реализовать перетаскивание / сортировку между 2 элементами списка:

<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>

По сути, я просто хочу иметь возможность передавать элементы между списками и сортировать элементы в каждом списке. Какой самый простой способ реализовать это с помощью jQuery?

Answer 1

jQueryUI Sortable - это именно то, что вы хотите.

Answer 2

Очень просто:

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

Я заметил, что более ранняя версия jQuery-UI (1.6rc5), с которой я пытался это сделать, не принимала селектор css для connectWith. Я бросил кривую и заставил ее работать с реальными элементами jQuery:

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