Question

I am setting up a draggable interface using jquery to do my drag/drop operations. I have a tall object (400px x 50px) that I want to drop into a small anchor (100px x 100px). It seems that in order for the “drop” and “over” events to fire, at least half the dragging container must be inside the bounds of the droppable container, which doesn’t happen in this case because the dragging container is so much bigger. Is there a way to lessen this restriction so that these events will fire?

Answer 1

I believe you’re looking for the tolerance option: http://jqueryui.com/demos/droppable/#option-tolerance

$( ".selector" ).droppable({ tolerance: "touch" });

You may also like the pointer value:

$( ".selector" ).droppable({ tolerance: "pointer" });

Update

If you want to limit certain droppables to only drop in a specific drop-zone then you can set the scope option:

$( ".selector-1" ).droppable({ scope: "tasks" });
$( ".selector-2" ).draggable({ scope: "tasks" });

The same documentation link as above will offer more info about this option as well.