jquery droppable 仅适用于前 50% 的宽度（错误？？）

Question

我正在使用可拖放。我每行有一个 div，每个都是可丢弃的。然后我有一个div，可以拖动。

我注意到这只适用于 div 宽度的前 50%。因此，如果我将 droppable div 设置为 600 像素，则 droppable 将仅在前 300 个像素上起作用。同样，如果我不设置宽度（100% 宽度），则 droppable 将仅在宽度的前 50% 处起作用。

这是一个fiddle：http://jsfiddle.net/6s375ycL/2/

我添加了 <div class="visualExample" id="line7">Not droppable, but 50% width for visual for above lines</div> 作为参考。如果您在第 1-6 行的红线左侧拖放，它会起作用，但如果您在它的右侧，则 droppable 不会触发。

另一个错误？：第 7 行应该是可放置的，但因为它有宽度，所以无法工作。它的任何部分都不会触发 droppable。

Answer 1

这是因为接受滴的默认公差选项是 50% 重叠（参见 http://api.jqueryui.com/droppable/#option-tolerance）。如果将其更改为 touch，则接受任何重叠百分比的下降。

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

这里有一个简单的 fiddle 来展示正确的行为。