Utilisation de jQuery triable ou droppable pour mettre des éléments dans des catégories?

Question

Je suis en train de placer des produits pour cateogories, comme

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

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

Je veux déposer les produits disponibles pour une catégorie et lorsque son chuté à poster la mise à jour via ajax retour. Peu importe ce qui est posté, que ce soit la catégorie mise à jour ou toutes les catégories.

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

Puis-je effectuer ce travail ou devrais-je utiliser le glisser-déposer?

Answer 1

Salut C'est le meilleur exemple, mais cela fonctionne:

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(',')); 
    } 
});