javascript - 无法在两个 droppable 相互接触的地方放置一个 draggable

Question

似乎当使用两个相互接触的 jquery UI 可放置对象时，可放置事件未正确触发。如果在将可拖动对象从其中一个元素上方拖动到其下方刚好到下一个元素上时，则会为第一个可放置对象触发 out 事件，但不会为第二个触发 over 事件。如果此时放下，则不会触发任何放下事件。

一个例子是最好的。尝试 this fiddle (在 IE7、8、9 和 Chrome11 中测试)。确保浏览器的控制台日志已打开。如果将 draggable 拖动到第一行，然后慢慢向第二行拖动，您很快就会在日志中看到第一行的 out 事件被触发，但第二行的 over 事件没有。如果您在这种情况下放下，则不会触发放下事件。

这似乎只是导致问题的行之间的 1 像素线。再拖动一个像素会触发 over 事件，并且 drop 事件会正常工作。

这对我来说看起来像是一个错误，但我找不到任何其他人将表格行用作可放置对象并报告了该问题。我设计了表格的样式，因此您可以看到行确实齐平在一起，中间没有空格。

这对我来说是个大问题，因为在我们的应用程序中，表格行是嵌套的贪婪可放置对象。因此，如果用户在发生这种情况时掉落，则掉落实际上会被外部 droppable 拾取。

此外，我们在可拖动助手中以图标和消息的形式向用户提供反馈，该图标和消息会根据您结束的可放置对象而变化。当您在行之间拖动时，它会闪烁片刻，因为它认为您实际上没有超过任何可放置的东西。

我的问题:

1. 此问题是否有任何修复或解决方法？
2. 我应该将此报告为错误吗？

更新

@达文，

我们最终确实更改了 $.ui.ddmanager 中的拖动功能以修复事件顺序。我们的问题是我们嵌套了贪婪的可丢弃物。当您从这些嵌套的 droppables 中的一个从下到上移动到另一个时，over 事件实际上会最后为父级触发，导致不好的事情发生。

因此我们添加了逻辑来基本上检查是否从一个嵌套贪婪移动到另一个嵌套贪婪，如果是，则不触发父事件。

要求您快速查看并确保我们的逻辑合理是不是太过分了？有两个逻辑变化。如果我们从贪婪的 child 转移到贪婪的 child :

1. 不要取消设置 parentInstance.greedyChild
2. 不要触发 parentInstance._over 事件。

这是代码。查看处理我们添加的 isParentStateChanged 闭包变量的行:

    drag: function(draggable, event) {

    //If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
    if(draggable.options.refreshPositions) $.ui.ddmanager.prepareOffsets(draggable, event);

    var isParentStateChanged = false;

    //Run through all droppables and check their positions based on specific tolerance options
    $.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {

        if(this.options.disabled || this.greedyChild || !this.visible) return;
        var intersects = $.ui.intersect(draggable, this, this.options.tolerance);

        var c = !intersects && this.isover == 1 ? 'isout' : (intersects && this.isover == 0 ? 'isover' : null);
        if(!c) return;

        var parentInstance;
        if (this.options.greedy && !isParentStateChanged) {
            var parent = this.element.parents(':data(droppable):eq(0)');
            if (parent.length) {
                parentInstance = $.data(parent[0], 'droppable');
                parentInstance.greedyChild = (c == 'isover' ? 1 : 0);
            }
        }

        // we just moved into a greedy child
        if (parentInstance && c == 'isover') {
            isParentStateChanged = true;

            parentInstance['isover'] = 0;
            parentInstance['isout'] = 1;
            parentInstance._out.call(parentInstance, event);
        }

        this[c] = 1; this[c == 'isout' ? 'isover' : 'isout'] = 0;
        this[c == "isover" ? "_over" : "_out"].call(this, event);

        // we just moved out of a greedy child
        if (parentInstance && c == 'isout') {

            if (!isParentStateChanged) {
                parentInstance['isout'] = 0;
                parentInstance['isover'] = 1;
                parentInstance._over.call(parentInstance, event);
            }
        }
    });

}

Answer 1

这本身不是错误，而是一项功能。这都是定义的问题。您已将可放置项目的容差定义为指针，根据文档，它是:

pointer: mouse pointer overlaps the droppable

当我的鼠标指针位于 (10,10) 并且我的框的左上角结束于 (10,10) 时，是否重叠？这取决于你的定义。 jQueryUI 的定义是强不等式或强重叠 (see the relevant code)。这(对我来说)是有道理的，因为如果我只是在边缘，我就不在盒子里，所以我不希望触发事件。

虽然如果出于您的目的您需要重叠条件中的弱不等式(即弱重叠)，您可以修改源代码中的那行代码，或通过添加覆盖它:

$.ui.isOverAxis = function( x, reference, size ) {
    return ( x >= reference ) && ( x <= ( reference + size ) );
};

工作示例:http://jsfiddle.net/vwLhD/8/

请注意，弱不平等会带来其他障碍:您的 out 事件将在 over 事件之后触发，因此您可能在一个事件之前有两个 over 事件out 已触发。这并不难处理，但您需要确保处理这种情况。

更新:

重要的是要注意，如果您添加我在上面粘贴的代码，它将影响 $ 范围内的所有其他 ui 小部件(如果这很重要)。也许替换 $ 可以避免这种情况。

无论如何，我有第二种解决方法可以完全解决上述问题，现在在每次鼠标移动时，指针都排他性地进入或离开每个元素:

$.ui.isOverAxis2 = function( x, reference, size ) {
    return ( x >= reference ) && ( x < ( reference + size ) );
};
$.ui.isOver = function( y, x, top, left, height, width ) {
    return $.ui.isOverAxis2( y, top, height ) && $.ui.isOverAxis( x, left, width );
};

工作示例:http://jsfiddle.net/vwLhD/10/

基本上，我已将较高的条件设为弱不等式，将较低的条件设为强不等式。所以边界是完全相邻的。现在事件几乎完美地发生了。几乎但不完全是因为插件仍然按顺序循环通过 droppables，所以如果我从上到下拖动，触发顺序是好的，因为首先它检测到我离开了更高的元素，然后检测到我进入了较低的元素，而从底部拖动到顶部的触发顺序是相反的 - 首先它进入较高的元素然后才离开较低的元素。

这个和以前的变通方法的区别在于，即使有一半的时间订单不好，这一切都在一个 tick 内发生，即 over-out 或 out-over 总是在一起，用户永远不会卡住，因为在原始案例和第一个解决方法中。

您可以通过更改 ui 代码以首先根据将鼠标悬停在项目上的项目循环遍历项目，然后才是其余部分(在 $.ui.ddmanager 函数)。这样鼠标离开总是先开火。或者，您可以交换顺序并获得相反的顺序；什么更适合你。

那肯定会完全解决您的问题。