javascript - jQuery UI 可排序 - 重叠 50% 似乎不起作用

Question

jQuery UI sortable 插件旨在使一组 DOM 元素可排序。官网有一个不错的demo here

API documentation提供了tolerance选项，描述中说:

Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values: intersect, pointer

此外，相交(默认)状态的描述:

intersect: The item overlaps the other item by at least 50%.

我预计，如果我拖动一个项目并将其移到另一个项目上，它会在 50% 的高度重叠时检测到我正在重新排序这些项目。但它似乎不是这样工作的:(。即使你检查了官方 demo ，并且你尝试将第一个项目拖到第二个项目上，你会看到第一个项目必须被整个拖动高度，例如其高度的 100%，超过第二个元素，然后才交换项目的顺序。

我错过了什么吗？作为程序员，我有什么办法可以强制插件按照我的预期工作吗？我希望用户仅将第一个项目向下移动其高度的 50%，以便插件检测重叠并执行重新排序。

Answer 1

简短的回答是:

有一个 bug ticket为此，似乎唯一的选择是某种形式的解决方法。

这是 a workaround example它使用自定义排序功能，似乎可以更好地回答您的问题。我将保留下面的示例以及另一种解决问题的方法。

...

这涵盖了单一方向的情况，但如果你想实现网格怎么办？

这是我编辑的解决方法 fiddle (带插入的网格示例):fiddle

注意:这不会交换 block ，它会插入它们并将其余部分推回去。

这是模拟 50% 覆盖率的 javascript/jQuery 代码片段:

var height = $(".tab").height();
var height = $(".tab").width();

    $('#pointer').sortable({
        cursorAt: { top: height/2, left: width/2 },
        containment: 'parent',
        tolerance: 'pointer'
    });