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

Posted 2023-05-08

【中文标题】jquery droppable 仅适用于宽度的前 50%（错误？？）

【英文标题】：jquery droppable only working on first 50% of the width (bug??)

【发布时间】：2015-04-16 07:15:09

【问题描述】：

我正在使用可拖动和可放置。我每行有一个 div，每个都是可删除的。然后我有一个div，可以拖动。

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

这是一个小提琴：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。

【问题讨论】：

嗨，克里斯，你试过我在答案中发布的 sn-p 吗？

【参考方案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 来显示正确的行为。

【讨论】：

我已经尝试过了，但仍然使用了 50% 的 tbody（在我自己的情况下），其他 50% 不起作用。