Question

我正在使用jQuery UI draggable插件将div拖到表格中。

我的问题是，有时当我拖入表格单元格时，我会遇到不会触发掉落事件。当准确地放在分隔两个单元（垂直或水平）的一个像素上时，似乎会发生这种情况。我试图将边框设置为0，但我仍然遇到问题。

查看此simplified example。

Answer 1

工作演示 http://jsfiddle.net/YNUzx/1/ 或 http://jsfiddle.net/YNUzx/2/

Tolerance选项应设置为touch以获得更好的拖动功能:)

或使用pointer作为容差：鼠标指针与可放置的

重叠

好读：http://jqueryui.com/demos/droppable/#option-tolerance

行为：现在当您将“1”拖到表格单元格时，触摸将触发表格中的下降，休息时您可以在演示中看到它。

希望这有帮助，

以下行可以解决问题：tolerance: "touch",

<强>码

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    accept: ".dragbox",
    tolerance: "touch",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});

Answer 2

我建议使用“触摸”容差选项，但删除可拖动的边距，因为它们会产生正确功能的问题。相反，为draggables使用包装器div并给该div一些余量。这可能会有助http://jsfiddle.net/YNUzx/3/

另外我建议您增加td的宽度和高度以确保正常工作。

编辑：试试这个http://jsfiddle.net/YNUzx/4/我想我得到了解决方案

Answer 3

感谢Tejasva Dhyani的评论并与Tats_innit聊天，我找到了答案：

当可拖动的div只在两个可放置的元素（单元格）之间时，jQuery会被混淆（当然也是如此）。

即如果在15px超过一个单元且15px超过另一个单元时丢弃，则不会触发掉落事件。

我所做的就是将宽度和高度设置为不均匀的数字see jsfiddle here：

在表格单元格的边界上放下时不会触发掉事件

3 个答案: