Reputation: 2799

droppable in droppable

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"));
    }
});

It always write "hello". only "hello". How can I bind droppable on childs too?

UPD: I want drop in elements in #hello's chidlren AND #hello itself. I want to determine where li was dropped.

Upvotes: 2

Answers (3)

Reputation: 2799

I've found the solution: #hello needs greedy:true

Upvotes: 5

Reputation: 146302

try this:

$("ul.cat").each(function(){

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

})

Upvotes: 0

Reputation:

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

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

Upvotes: 0