Как автоматически изменить порядок сортировки списка jQuery UI?

Question

У меня есть 2 сортируемых списка jQuery UI (http://jqueryui.com/demos/sortable/#connect-lists).

Я перетаскиваю элементы из списка A (каталог) в список B (корзина).

Что я хочу, это списки (A и B)) к автоматически переупорядочивать себя при добавлении элемента (отсортированному по цене). Поэтому, когда элемент помещается в корзину, он перемещается на свою позицию (верх / середина / низ) в соответствии с его ценой.

Answer 1

Вы должны использовать сортируемую форму события «receive» вместе с методом sort.

$('.list_a, .list_b').sortable({
    receive: function(){

        $('.list_a').html($('.list_a').get().sort(sortByPrice));
        $('.list_b').html($('.list_b').get().sort(sortByPrice));

        // As we replaced the content of the list, you probably need to 
        // make it sortable again... kind of a big hack

    }
});

function sortByPrice(a, b){

    // The parseFloat will not work if you have text before the price
    // in the price container.

    var price_a = parseFloat($('.price_selector', a).text());
    var price_b = parseFloat($('.price_selector', b).text());

    if(price_a < price_b) return -1;
    if(price_a > price_b) return 1;

    return 0;

}

Answer 2

Я не думаю, что есть встроенный механизм сортировки, который вы описали для сортируемых списков пользовательского интерфейса jQuery.Однако вы можете использовать этот плагин jQuery для сортировки элементов вручную.Он очень легкий и позволяет вам контролировать порядок сортировки, определяя функцию сортировки.

Вы можете присоединить процедуру сортировки к событию receive вашего "списка корзины".В этом случае вы должны отсортировать товары в списке корзин, посмотрев их цену и сравнив их численно.Обратите внимание на второй параметр sortElements.Это позволяет вам сказать сортировщику, какой элемент вы действительно хотите переместить.Хотя в этом случае, просто переместить элемент li может быть хорошо.