Using jQuery to sort or drop to place items in categories?

Question

I am trying to post products in cateogories e.g.

<ul id="Category1"></ul>
<ul id="Category2"></ul>

<ul id="Available">
 <li id="prod1">Product1</li>
 <li id="prod2">Product2</li>
</ul>

I want to drop the available products into the category, and when it fell to send the update back through ajax. It really doesn't matter what is sent back, whether it is an updated category or all categories.

$(document).ready(function() {
    $("tr:even").css("background", "#f7f7f7");
    $("ul.drop").sortable({
        connectWith: 'ul',
        tolerance: 'pointer',
        stop: function(ev, ui) {
             ?????
        }
    });
});

Can I do this work, or should I use drag and drop?

Answer 1

Hi This is the best example, but it works:

http://jsfiddle.net/marcosfromero/xpmAt/

$("ul.basket").sortable({
    connectWith: 'ul.basket',
    tolerance: 'pointer',
    stop: function(event, ui) {
        // Get all Category1 and Category2 selected products and
        // populate matching fields
        jQuery('#selected1').val(jQuery('#Category1 li').map(function() {return this.id;}).get().join(','));
        jQuery('#selected2').val(jQuery('#Category2 li').map(function() {return this.id;}).get().join(','));
    }
});