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();

说明：

拖动项目时，首先发生的是start:函数。在那里，我们获取项目的当前索引位置并将其存储为pre
删除项目后，将执行stop:功能。在这里，我们希望得到：
一个。我们正在分类哪个列表湾新索引位置（现在我们有START位置和STOP位置）
C。其他列表的名称
IF post（新索引位置）大于pre（原始位置）：
一个。我们正在将项目向下移动，所以......
湾当我们以编程方式重新定位其他列表中的项目时，我们必须使用insertAfter
的 ELSE
一个。我们正在列表中移动项目，所以
湾移动其他列表中的项目时，我们必须使用insertBefore方法。

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

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

希望有所帮助。

Answer 2

此解决方案可在您拖动时实时运行：

var currentIndex;
$(function() {
    $( ".list" ).sortable({
        start: function(event, ui) { 
            currentIndex = ui.helper.index();
        },
        change: function( event, ui ) { 
            var indexCount = ui.item.parent().find('div:not(.ui-sortable-helper)');
            var sortClass = '.'+ui.item.attr('class').split(' ')[0];
            var parent = $('.list').not(ui.item.parent());
            if(currentIndex > ui.placeholder.index()){
                parent.find('div').eq(indexCount.index(ui.placeholder)).before(parent.find(sortClass));
            }
            else
                parent.find('div').eq(indexCount.index(ui.placeholder)).after(parent.find(sortClass));
            currentIndex = ui.placeholder.index();
        }
    });
    $( ".list" ).disableSelection();
});

http://jsfiddle.net/trevordowdle/EXk7T/2/

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

2 个答案: