0

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

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

看看这个简化的例子。

4

3 回答 3

2

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

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

或用作pointer容差：鼠标指针与 droppable 重叠

好读：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'
        });
    }
});​
于 2012-06-19T10:40:05.030 回答
1

我的建议是使用“触摸”公差选项，但删除可拖动的边距，因为它们会为正确的功能造成问题。而是为可拖动对象使用包装器 div 并给该 div 一些边距。这可能会帮助http://jsfiddle.net/YNUzx/3/

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

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

于 2012-06-19T11:25:58.660 回答
0

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

当可拖动 div 位于两个可放置元素（单元格）之间时，jQuery 会感到困惑（这是理所当然的）。

即，如果在 15px 在一个单元格上方而 15px 在另一个单元格上方时下降，则不会触发下降事件。

我所做的只是将宽度和高度设置为奇数，请参见此处的 jsfiddle：

于 2012-06-19T12:11:49.767 回答