使用Jquery UI可排序一次对2个列表进行排序 [英] Using Jquery UI sortable to sort 2 list at once

问题描述

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

I have a very simple question. Using Jquery UI's sortable, I want to sort two Identical list at once. Let say I have two lists of 5 draggable objects each. Sorting one list will also sort the other list in an identical manner. Is there a way to do this with Jquery UI?

我有类似的事情要开始...

I have something like this to start...

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

推荐答案

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

You can use one routine for both lists if you use IDs to identify each list, and classes to identify all lists that can be sorted.

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

In the jsFiddle demo, please note that change to your HTML.

jsFiddle演示

这是工作代码:

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

1. When you drag an item, the first thing that happens is the start: function. In there, we grab the current index position of the item and store it as pre

放下该项目时，将执行 stop:函数.在这里，我们要获得:
一种.我们正在对哪个列表进行排序
b.NEW索引位置(因此现在有了START位置和STOP位置)
C.其他列表的名称

When the item is dropped, the stop: function is executed. In here, we want to get:
a. Which list we are sorting
b. The NEW index position (so now we have the START position and the STOP positions)
c. The name of the other list

IF post (新索引位置)大于 pre (原始位置):
一种.我们将项目下移，所以...
b.当我们以编程方式在另一个列表中重新定位该项目时，我们必须使用 insertAfter
ELSE
一种.我们将项目在列表中上移，所以
b.在其他列表中移动项目时，必须使用 insertBefore 方法.

IF post (the NEW index position) is greater than pre (the ORIGINAL position):
a. We are moving the item DOWN, so...
b. When we programatically relocate the item in the other list we must use insertAfter
ELSE
a. We are moving the item UP in the list, so
b. We must use the insertBefore method when moving the item in the other list.

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

Inside the if statement, variable values tell jQuery which item to move and where to put it. It may help to see the code WITHOUT the variables. So, as an example, if I move the first item in List1 to the bottom of the list, here is what we want jQuery to do to the other list:

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

希望有帮助.

这篇关于使用Jquery UI可排序一次对2个列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！