jQuery UI可排序容差选项无法按预期工作

Question

以下是该选项的jQuery UI文档中的部分tolerance:

这是重新排序在拖动过程中的行为方式.可能的值:'intersect','pointer'.在某些设置中,"指针"更自然.

相交:draggable重叠至少50%的droppable

默认值是intersect,但是如果鼠标指针不在可排序项目之上,则排序不会发生,无论被拖动元素是否比其他可排序项目至少高50%(我期望的功能)这在演示页面上发生好(上面链接)

这是jQuery UI中的错误,还是我理解错了？

Answer 1

对于那些有同样问题的人,我使用的解决方法是:

$('#sortable').sortable({
    axis: 'x',
    sort: function (event, ui) {
        var that = $(this),
            w = ui.helper.outerWidth();
        that.children().each(function () {
            if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) 
                return true;
            // If overlap is more than half of the dragged item
            var dist = Math.abs(ui.position.left - $(this).position().left),
                before = ui.position.left > $(this).position().left;
            if ((w - dist) > (w / 2) && (dist < w)) {
                if (before)
                    $('.ui-sortable-placeholder', that).insertBefore($(this));
                else
                    $('.ui-sortable-placeholder', that).insertAfter($(this));
                return false;
            }
        });
    },
});?

这适用于水平排序,对于一个垂直的一个变化outerWidth,以outerHeight和position.left对position.top无处不在.

这是一个完整的工作示例

Answer 2

我的可排序项目大小不均匀,这会使事情变得更糟.我已经修改了dioslaska的代码,一旦处理程序的底部经过了孩子的底部(向下移动时)就更改了顺序,并且顶部相同...

sort: function (event, ui) {
    var that = $(this),
        draggedHeight = ui.helper.outerHeight(),
        originalTop = ui.originalPosition.top,
        draggedTop = ui.helper.position().top,
        draggedBottom = draggedTop + draggedHeight;
    that.children().each(function () {
        if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) {
            return true;
        }
        var childTop = $(this).position().top,
            childHeight = $(this).outerHeight(),
            childBottom = childTop + childHeight,
            isChildAfter = originalTop < childTop,
            largeTop,largeBottom,smallTop,smallBottom;
        if (childHeight > draggedHeight) {
            largeTop = childTop;
            largeBottom = childTop + childHeight;
            smallTop = draggedTop;
            smallBottom = draggedBottom;
        } else {
            smallTop = childTop;
            smallBottom = childTop + childHeight;
            largeTop = draggedTop;
            largeBottom = draggedBottom;
        }
        if (smallBottom > largeTop || smallTop < largeBottom) {
            if (isChildAfter && draggedBottom >= childBottom) {
                $('.ui-sortable-placeholder', that).insertAfter($(this));
            } else if (!isChildAfter && draggedTop <= childTop) {
                $('.ui-sortable-placeholder', that).insertBefore($(this));
                return false;
            }
        }
    });
}

您可以看到重叠检测比以前更棘手,因为您可能将大项目拖动到小项目上,反之亦然.

它并不完美,但它是对默认功能的巨大改进.

Answer 3

这种情况的发生与您在 IE9、FF11 和 Chrome18 中描述的完全一样。

当鼠标位于上方至少 50% 时相交重叠。
我认为这个文档是不正确的。

编辑：我在 JQuery Bugtracker 中没有发现与此相关的错误。