Javascript jQuery UI可排序-重叠50%不'；好像不行

jQueryUI

sortable

插件旨在使一组DOM元素能够进行排序。官方网站上有一个很好的演示

提供了公差选项，说明如下：

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

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

相交：项目与其他项目重叠至少50%

我预计，如果我拖动一个项目，并将其移动到另一个项目上，当50%的高度重叠时，它将检测到我正在对项目重新排序。但它似乎不是这样工作的：（.即使你检查了官方，并试图将第一个项目拖到第二个项目上，你会发现第一个项目必须拖到第二个元素上的整个高度，比如100%的高度，然后才交换项目的顺序

---

我是否遗漏了什么？作为一名程序员，有没有办法强迫插件按我预期的方式工作？我希望用户只将第一项向下移动50%的高度，以便插件检测重叠并执行重新排序。

简短的回答是：

这有一个解决方案，所以似乎唯一的选择是某种形式的变通方法

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

以单一方向覆盖案例，但如果要实现网格呢？

下面是我编辑的一个解决办法（网格示例w/insert）：

注意：这不会交换块，而是插入块并将其余块推回

下面是一段模拟50%覆盖率的javascript/jQuery代码：

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

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

---

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

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

因此，由于您指定了公差：“相交”，因此，此._intersectsWithSides（项目）为接受

和函数_交叉边（项）定义如下：

_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();

它采用“项目高度/2”和“项目宽度/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%”是由代码定义的-

---

希望这些帮助

我可以看到它的实际行为。但我坚信这种行为是不正确的。公差：指针应该关心鼠标光标的位置。但公差：intersect不应该，就我对文档的理解而言。我的问题是，作为一名程序员，我能做些什么使我的可排序元素按我所期望的方式运行。我编辑了我的问题，以便更好地解释我的问题。我不是作为用户询问单击何处。我是作为开发人员询问，我可以做些什么，以使其按我的方式为其他用户工作。谢谢。提供的带有cursorAt的解决方案仅将拖动的项目移动到光标下，因此它是一个s如果用户在特定位置拖动它。使用top:0就像我们在最上方的像素点单击项目一样。这实际上并不能解决问题。非常感谢您尝试在这里帮助我。我测试了您的小提琴，但它不能按我的要求工作。如果我拖动第一个项目而不考虑鼠标光标的位置，我必须在整个hei中拖动它为了与第二个项交换，请向下拖动项的ght。我只想将其拖动其高度的50%。我不明白为什么您编辑了某个根本不起作用的解决方案的答案：）您以前的回答解决了这个问题-为jquery ui插件提供自定义“排序”功能（如变通方法中所述）对我来说很有效。很抱歉在这里更改了您的答案。我把答案调回你以前接受它的方式。我保留了额外的信息，以供任何人参考网格（常见问题）查看此问题，因为我认为这是有帮助的，并提供了50%的重叠功能（插入块，而不是交换块），因此从这个意义上讲，它的工作原理如图所示。谢谢。非常感谢你的解释。我可以看到50%是由代码定义的。但我抱怨它不起作用：]用户必须将项目拖动到100%的高度，而不是50%，才能交换它们。