Question

jQuery UI sortable插件旨在使一组DOM元素可以排序。一个很好的演示在官方网站here

API documentation提供tolerance选项，说明如下：

指定用于测试正在移动的项目是否悬停在另一个项目上的模式。可能的值：intersect，pointer

此外，相交（默认）的描述说明：

intersect：该项与另一项重叠至少50％。

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

我错过了什么吗？有没有办法让我作为程序员强制插件工作，因为我期望它工作？我希望用户将第一项只移动其高度的50％，以便插件检测重叠并执行重新排序。

Answer 1

简短的回答是：

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

此处使用自定义排序功能的a workaround example，似乎可以更好地回答您的问题。我还将保留以下示例以解决此问题。

...

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

这是我编辑的变通方法（网格示例w / insert）：fiddle

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

这里有一个javascript / jQuery代码的片段，它嘲笑了50％的覆盖率：

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;
                }

所以，由于你指定了容差：“intersect”，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％”由代码定义.-

希望这个帮助

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

2 个答案: