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

Question

I have 2 jQuery UI sortable lists (http://jqueryui.com/demos/sortable/#connect-lists).

I drag items from list A (catalog) to list B (basket).

What I want is for the lists (A and B) to reorder themselves automatically when an item is added (sorted by price). So when an item is dropped into the basket, it will go to its position (top/middle/bottom) according to its price.

Answer 1

You should use the "receive" event form sortable in conjunction with the sort method.

$('.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

I don't think there is a built in sorting mechanism like you've describted for the jQuery UI sortable lists. However, you could use this jQuery plugin to manually sort the items. It's very light weight and lets you control how things are sorted by defining a sorting function.

You could attach the sorting routine to the receive event of your "basket list." In that event, you would sort the items in the basket list by looking at their price and comparing them numerically. Pay attention to the second parameter of sortElements . It allows you to tell the sorter what element you actually want to move. Though in this case, just moving the li item might be fine.