Сортировка LI в разных UL с помощью jQuery - PullRequest
Новая
       51

Сортировка LI в разных UL с помощью jQuery

1 голос
/ 28 ноября 2010

У меня есть эта разметка, динамически сгенерированная с помощью PHP / MySQL 

<div id="sortable">
    <h3>Italy</h3>
    <ul>
        <li id="row_1">Record > 1</li>
        <li id="row_2">Record > 2</li>
        <li id="row_3">Record > 3</li>
    </ul>

    <h3>Europe</h3>
    <ul>
        <li id="row_4">Record > 4</li>
        <li id="row_5">Record > 5</li>
        <li id="row_6">Record > 6</li>
    </ul>

    <h3>World</h3>
    <ul>
        <li id="row_7">Record > 7</li>
        <li id="row_9">Record > 9</li>
        <li id="row_8">Record > 8</li>
    </ul>
</div>
<div id="response"></div>

Я могу перетащить LI с jQuery UI, сортируемыми на новые позиции, и получить их новый порядок с помощью "serialize", готовые для обновления базы данных. КакВы можете видеть, что есть 3 UL, но все их N LI связаны, поэтому я получаю «сериализацию» N-элементов с каждым перетаскиванием, и это именно то, что я хочу

Итак, то есть, если я перемещаю запись3 в записи 1 место, я получаю это:

3,2,1,4,5,6,7,8,9 <это именно то, что я хочу </p>

а не это:

3,2,1 <это НЕ то, что я хочу </p>

Это мой код jQuery: 

$("#sortable").sortable({
    items: 'li',
    opacity: 0.6,
    cursor: 'move',
    update: function() {
    var order = $(this).sortable("serialize") + '&nAction=move';
    $.post("mypage.php", order, function(response){
        $("#response").html(response);
    });
}
}).disableSelection();

Это работает, но не так, как хотелось бы: я имею в виду, что мне нужно перетаскивать только LI в пределах их соответствующего UL, а НЕ из одного UL в другой (всегда сохраняя сериализацию N-элементов)

Другими словами, я хотел бы иметь возможность сортировать записи 1, 2 и 3 среди них, 4, 5 и 6 среди них и 7,8,9 среди них, без микширования (т. Е. Запись 1 не может войти вгруппа 4,5,6 ни в группе 7,8,9)

Конечно, всегда получаю сериализацию N-предметов!(и это основная причина, по которой я применил «сортируемое» к погружению в контейнер, а затем указал элементы LI)

Я пробовал с «сдерживанием:« родитель »», но это работает только для первого перетаскивания

Вот два онлайн-примера, сделанные с помощью jsFiddle:

  1. Исходный , с LI, идущими от одного UL к другому
  2. Версия с «сдерживанием» , которая работает только при первом перетаскивании, но в следующих перетаскиваниях беспорядок

1 Ответ

0 голосов
/ 28 ноября 2010

http://jsfiddle.net/zAUT3/2/ - применить сортировку для каждого индивидуума ul в отдельности. Затем, когда вам нужно сериализоваться, просто используйте each() для циклического перебора всех сортируемых объектов и создания составной сериализации.

Вот модифицированный код из jsFiddle, указанного выше: 

$(".sortable").sortable({
    items: 'li',
    opacity: 0.6,
    cursor: 'move',
    update: function() {
        var order ='';
        $('#allGroups .sortable').each(function(i,el) {
            order += $(el).sortable("serialize") +'&';
        });
        order += 'nAction=move';

        alert(order);
        $.post("/echo/html/", order, function(response) {
            $("#response").html(response);
        });
    }
}).disableSelection();
...