jquery droppable only working on first 50% of the width (bug??)

Question

I am using draggable and droppable. I got one div per line, each are droppable. Then I have one div, that is draggable.

I have noticed that this only works on the first 50% of the divs width. So if I set droppable div to 600 pixels, the droppable will only work on the first 300 pixels. Similarly, if I set no width (100% width) the droppable will only work on the first 50% of the width.

Here is a fiddle: http://jsfiddle.net/6s375ycL/2/

I added <div class="visualExample" id="line7">Not droppable, but 50% width for visual for above lines</div> for a reference. If you drag & drop on line 1-6 at the left of that red line, it will work, but if you are to the right of it, the droppable wont trigger.

Another bug?: Line 7 should be droppable, but because it has a width, it wont work. No part of it will trigger the droppable.

Answer 1

This is because the default tolerance option for accepting drops is 50% of overlap (see http://api.jqueryui.com/droppable/#option-tolerance). If you change it to touch, the drop is accepted for any overlap percentage.

$('.droppable').droppable({ 
    tolerance:"touch",
    drop: function(event, ui) 
    {
        var droppableId = $(this).attr("id");
        alert('dropped in: ' + droppableId);
    }
});

Here's a simple fiddle to show the correct behaviour.