使用Jquery UI可排序一次排序2列表

Question

我有一个非常简单的问题.使用Jquery UI的可排序,我想一次排序两个相同的列表.假设我有两个列表,每个列表包含5个可拖动对象.对一个列表进行排序也将以相同的方式对另一个列表进行排序.有没有办法用Jquery UI做到这一点？

我有这样的事情开始......

<div class="list1">
    <div class="quote1">1</div>
    <div class="quote2">2</div>
    <div class="quote3">3</div>
    <div class="quote4">4</div>
    <div class="quote5">5</div>
</div>

<div class="list2">
    <div class="quote1">1</div>
    <div class="quote2">2</div>
    <div class="quote3">3</div>
    <div class="quote4">4</div>
    <div class="quote5">5</div>
</div>

<script>
$(function() {
    $( ".list1" ).sortable();
    $( ".list1" ).disableSelection();

    $( ".list2" ).sortable();
    $( ".list2" ).disableSelection();
});
</script>

Answer 1

如果使用ID来标识每个列表,则可以对两个列表使用一个例程,并使用类来标识可以排序的所有列表.

在jsFiddle演示中,请注意更改HTML.

jsFiddle Demo

这是工作代码:

var lst, pre, post; //lst == name of list being sorted

$(".sortlist").sortable({
    start:function(event, ui){
        pre = ui.item.index();
    },
    stop: function(event, ui) {
        lst = $(this).attr('id');
        post = ui.item.index();
        other = (lst == 'list1') ? 'list2' : 'list1';
        //Use insertBefore if moving UP, or insertAfter if moving DOWN
        if (post > pre) {
            $('#'+other+ ' div:eq(' +pre+ ')').insertAfter('#'+other+ ' div:eq(' +post+ ')');
        }else{
            $('#'+other+ ' div:eq(' +pre+ ')').insertBefore('#'+other+ ' div:eq(' +post+ ')');
        }
    }
}).disableSelection();

说明:

1. 拖动项目时,首先发生的是start:函数.在那里,我们获取项目的当前索引位置并将其存储为pre

2. 删除项目时,将stop:执行该功能.在这里,我们希望得到:
   a.我们正在排序的列表
   b.新索引位置(现在我们有START位置和STOP位置)
   c.其他列表的名称

3. IF post(新指数位置)大于pre(原点位置):
   a.我们正在向下移动项目,所以...
   b.当我们以编程方式重新定位另一个列表中的项时,我们必须使用insertAfter
   ELSE
   a.我们正在列表中移动项目,所以
   b.我们必须insertBefore在移动其他列表中的项目时使用该方法.

4. 在if语句中,变量值告诉jQuery要移动哪个项目以及放置它的位置.查看没有变量的代码可能会有所帮助.因此,作为一个例子,如果我将List1中的第一项移动到列表的底部,这就是我们希望jQuery对其他列表执行的操作:

$('#list2 div:eq(0)').insertAfter('#list2 div:eq(4)');

希望有所帮助.