如何使用jQuery在2个排序列表之间拖动项目?

时间:2010-04-14 13:10:19

标签: javascript jquery html jquery-ui sorting

我正在尝试在两个列表元素之间实现拖放/排序:

<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实现这个的最简单方法是什么?

2 个答案:

答案 0 :(得分:3)

jQueryUI Sortable - 这正是你想要的。

答案 1 :(得分:1)

很简单:

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

我注意到早期版本的jQuery-UI(1.6rc5)我试过这个并不接受connectWith的css选择器。我抛出一条曲线,让它与实际的jQuery元素一起使用:

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