Question

I’ve got two nested divs both droppable. Based upon the content of the inner div it’s determined through the accept property whether an element is allowed to drop. By doing so I prevent duplicates in the inner droppable.

The problem is that if the accept property is set to false within the inner div the event is bubbled to the parent. The parent accepts the drop and that is exactly what I don’t want. One complicating factor is that the accept function’s arguments consist only of the dropped nodes, I have no reference to the actual event object so I can’t stop propagation 🙁

So the big question is: can I prevent event propagation to the parent droppable if the child accept property evaluates to false?

The code:

$(node).droppable({
    tolerance: "intersect",
    accept: function(nodes) {
                    //if acceptPM evaluates to false the event is bubbled which I don't want
        return acceptPM(nodes);
    },
    greedy: true,
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        //do something          
    }
});

Answer 1

Solved it.

I worked around the event propagation, I removed the accept function and added a check in the drop function. If the item allready exists do nothing and the drop is reverted 🙂

Perhaps not the cleanest way but it works.

Quite simple in hindsight..