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

Question

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

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

指定使用哪种模式来测试正在移动的项目是否悬停在另一个项目上。可能的值：相交、指针

此外，intersect 的描述（默认）状态：

相交：该项目与另一个项目重叠至少 50%。

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

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

Answer 1

简短的回答是：

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

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

...

这涵盖了单一方向的情况，但是如果你想实现一个网格呢？

这是我编辑的解决方法小提琴（带插入的网格示例）：fiddle

注意：这不会交换块，它会插入它们并将其余的推回。

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

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

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

Answer 2

查看小部件的代码，您会发现：

if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
                    this._rearrange(event, item);
                } else {
                    break;
                }

所以，由于您指定了容差：“相交”，this._intersectsWithSides(item) 接受它。

函数 _intersectsWithSides(item) 在这里定义：

_intersectsWithSides: function(item) {
        var isOverBottomHalf = this._isOverAxis(this.positionAbs.top +
 this.offset.click.top, item.top + (item.height/2), item.height),
            isOverRightHalf = this._isOverAxis(this.positionAbs.left + 
this.offset.click.left, item.left + (item.width/2), item.width),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

需要“item.height/2”和“item.width/2”

您可以使用您的 on 函数并重新定义此行为：

_myIntersectsWithSides: function(item) {
        var isOverBottomHalf = this._isOverAxis(this.positionAbs.top +
 this.offset.click.top, item.top + (item.height/5), item.height),
            isOverRightHalf = this._isOverAxis(this.positionAbs.left + 
this.offset.click.left, item.left + (item.width/5), item.width),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

这会给你 20%（100/5 而不是 100/2）的宽度和高度。

由代码定义的“50%”。-

希望有帮助