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 UI可排序列表描述的内置排序机制。但是，您可以使用this jQuery plugin手动对项目进行排序。它的重量非常轻，可以通过定义排序功能来控制事物的排序方式。

您可以将排序例程附加到“购物篮列表”的receive事件中。在这种情况下，您可以通过查看其价格并在数字上对它们进行比较来对篮子列表中的项目进行排序。注意sortElements的第二个参数。它允许您告诉分拣机您实际想要移动的元素。虽然在这种情况下，只需移动li项就可以了。

如何自动重新排序可排序的jQuery UI列表？

2 个答案: