Droppable in droppable

Question

I have this markup

<ul id="hello" class="cat"> <ul id="a1" class="cat"> </ul> <ul id="a2" class="cat"> </ul> </ul> 

I did this thing

 $("ul.cat").droppable( { drop:function() { alert($(this).attr("id")); } }); 

He always says hello. just hello. How can I associate droppable with children?

UPD: I want to add elements to #hello chidlren AND #hello. I want to determine where the identity was deleted.

Answer 1

I found a solution: #hello needs greedy:true

http://jqueryui.com/demos/droppable/#propagation

Answer 2

try the following:

 $("ul.cat").each(function(){ $(this).droppable( { drop:function() { alert($(this).attr("id")); } }); }) 

http://jsfiddle.net/maniator/HXjeQ/

Answer 3

It will bubble up to the top UL, which you don't want droppable. Try the following:

 $("#hello ul.cat").droppable( { drop:function() { alert($(this).attr("id")); } }); 

here jsfiddle