jquery - DataTables & Droppable hit-zone off-center

Question

我正在尝试将 DataTables 和 JQuery UI Droppable 结合起来。

当我拖过数据表时，我希望叠加层与表的区域重叠。这实际上工作得很好。我有一个#tabledataTables 和 JQuery UI 参考它们各自的代码。

但是，拖动事件 ( over, drop) 仅在表的一半上触发。（左侧。）

这是我的活生生的例子。请务必将列表项之一拖到表格上。

我正在使用 Chrome 27。

我有一个双显示器设置，如果我用这个例子拖到我的另一个显示器上（假设它是全屏的），拖动事件实际上会在左侧窗口之外触发。

这是一个视觉示例：

我想知道这可能是什么原因造成的？当我用控制台检查桌子时，它显示它应该在哪里，桌子中间没有任何东西重叠。

这是 DataTables 和 Droppable 不能一起工作的副作用吗？我不太明白。也许这只是一个CSS问题？

我尝试过弄乱 JQuery UI Positioning 并使用控制台进行调查，但我没有取得任何成功。我的怀疑是它与 droppable 有关，并且它没有正确定位表格的位置（即使 position 确实正确，正如您在视觉上看到的那样）。

有没有人有任何想法？

Answer 1

看起来问题是由droppable 的容差选项引起的；它的默认值为intersect.

如 API 文档中所述

intersect: Draggable 在两个方向上至少与 droppable 重叠 50%。

看看您<li>的 s 如何仍处于默认样式，它们将填充其 parent 的可用宽度<ul>，如果您尝试将它们拖到表格的右侧，超过 50% 的<li>将悬挂在可放置对象之外。

<li>通过为您的 s添加一些边框，#myListOfData您可以更好地了解正在发生的事情。

图1

所以现在我们知道了问题所在，接下来就是解决方案了。

正如Pepper所说，您可以将 droppable 的容差选项更改为指针：

工作示例 1

    $('#table').droppable({
        tolerance: 'pointer', //Important Bit
        over: function (event, ui) {
            $('#tableOverlay').width($(this).width());
            $('#tableOverlay').height($(this).height());

            $('#tableOverlay').show();
            $("#tableOverlay").position({
                of: this,
                at: "top left",
                my: "top left"
            });
        },
        out: function (event, ui) {
            $('#tableOverlay').hide();
        },
        drop: function (event, ui) {
            $('#tableOverlay').hide();
        }
    });

或者你可以tolerance option: 'touch'像这样使用：

工作示例 2

    $('#table').droppable({
        tolerance: 'touch', //Important Bit
        over: function (event, ui) {
            $('#tableOverlay').width($(this).width());
            $('#tableOverlay').height($(this).height());

            $('#tableOverlay').show();
            $("#tableOverlay").position({
                of: this,
                at: "top left",
                my: "top left"
            });
        },
        out: function (event, ui) {
            $('#tableOverlay').hide();
        },
        drop: function (event, ui) {
            $('#tableOverlay').hide();
        }
    });

或者您可以为您的 s 指定一个宽度，<li>如下所示：

工作示例 3

#myListOfData li {
    width: 100px;
}

或者，如果您不想更改公差选项或指定宽度，您可以
display: table;像这样使用：

工作示例 4

#myListOfData li {
    display: table;
}

Answer 2

添加tolerance: "pointer"使它按预期工作。