jQuery сортируемое соединение с несколькими списками - PullRequest
Новая
       2

jQuery сортируемое соединение с несколькими списками

4 голосов
/ 14 марта 2012

У меня есть два списка с 8 элементами списка в каждом. Я хотел бы перетащить любой элемент в любой список и получить общий порядок обоих списков вместе.

В настоящее время заказ классифицируется как два отдельных сортируемых списка: 

[0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7]

Однако я бы хотел, чтобы это было (очевидно, в порядке элементов): 

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

Параметр connectWith не работает вообще, и я не могу перетаскивать элементы в другие списки. 

$(document).ready(function() {
    $('#list-1, #list-2').sortable({
        connectWith: '.group',
        update: function(event, ui) {
            var orders = new Array();
            $('#console').html('<b>posts[id] = pos:</b><br>');
            $('.group li').each(function(i) {
                var order = $(this).index();               
                var id = $(this).attr('data-post-id');
                orders.push(order);
            });
            console.log(orders)
        }
    });

});

Я создал jsFiddle

Может ли кто-нибудь дать совет, почему это не работает?

1 Ответ

9 голосов
/ 14 марта 2012

Ваша проблема с float:left на элементах li. Вам также необходимо добавить float:left к контейнерам (т. Е. ul), чтобы придать им высоту

Обновил ваш jsfiddle здесь

Исправлено изменение вашей CSS на 

ul { list-style: none; float:left;  }

Обновление

Чтобы получить заказ, попробуйте это: 

$('.group li').each(function(i) {           
     var id = $(this).data('post-id');
     orders.push(parseInt(id.substr(id.indexOf('-')+1)));
});
console.log(orders)

Примечание: вы должны использовать .data () для хранения / извлечения данных на узле, а не attr() метод

Рабочий пример здесь

...