CODEWITHSUNDEEP
jquery-ui
Steve
Steve

Reputation: 4898

Can't stop the drop event from propagating

I want to drop a small pattern into a div or into the body and have the background for that div or the body, whichever received the pattern, repeat the pattern in x and y. See jsfiddle . If I drag the pattern from the Gallery div and drop it in the body, just the body gets the background pattern. Great! That works. But if I drop the pattern into the canvas div, both the body and the canvas get the pattern. How can I just have the canvas get the pattern when it's the drop target. I tried every way I know, at the end of the drop handler, to stop propagation . . .

 e.stopPropagation();
 e.stopImmediatePropagation();
 return false;

but nothing is working.

Thanks for any help.

Upvotes: 1

Views: 579

Answers (1)

War10ck
War10ck

Reputation: 12508

You had it almost right. I've modified your fiddle to show the change.

You needed to add the greedy property in the thumb_dropOps object. Modify your function to be the following:

var thumb_dropOps = {       
    drop : thumb_drop,
    accept : '#pattern',
    greedy: true
};

Here is a reference link: jQuery UI - Droppable API Docs

Per the jQuery UI Documentation:

By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.

Upvotes: 1

Related Questions