Appending an element to the child fires the drop event in the parent

Question

I'm a bit confused with jquery's drag and drop behaviour. Please check this fiddle:

I'm trying to check if the draggable element is dropped in the list (child) or the div (parent). It works fine if I comment the append call. I tried inserting the greedy option in the child and checking the event.target in the parent's event handler but it always comes up as event.target=the parent

Answer 1

Why you are binding droppable widget twice? Remove following widget

$("div.ui-droppable").droppable({
    greedy: true,
    drop: function (event, ui) {
        printEventReceiver("parent",event)
    }
})

and, change

$("ul.ui-droppable").droppable({

to

$(".ui-droppable").droppable({

Basically, greedy flag work only within the context of one widget initialisation. So, it's better to initialise widget once by using some common class and remove duplicate initialisations when possible.

Check here: https://jsfiddle.net/scorpy2007/yu0pontg/23/