jQuery UI可排序-重叠50%似乎行不通

jQuery UI sortable - overlapping by 50% doesn't seem to work

本文关键字：行不通 -重叠 UI 排序 jQuery      更新时间：2023-09-26

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

API文档提供了tolerance选项，并且描述说:

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

此外，intersect的描述(默认)为:

intersect:该项与另一项重叠至少50%。

我期望，如果我拖动一个项目，并将其移动到另一个项目上，它将检测到我正在重新排序项目，只要50%的高度重叠。但似乎不是这样的。即使你检查了官方演示，并尝试将第一个项目拖到第二个项目上，你也会看到第一个项目必须拖到第二个元素上的整个高度，比如其高度的100%，然后项目的顺序才会交换。

我错过了什么吗?作为一个程序员，我是否有办法强迫插件工作，因为我希望它能工作?我希望用户移动第一项只有其高度的50%，为了让插件检测重叠和执行重新排序。

简短的回答是:

这有一个bug票，所以似乎唯一的选择是某种形式的解决方案。

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

…

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

这是我编辑的一个变通小提琴(网格示例w/insert):小提琴

: 这不会交换块，它插入它们并将其余的推回去。

下面是javascript/jQuery代码的一个片段，它模拟了50%的覆盖率:

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

因此，由于您指定了公差:"intersect"， this._intersectsWithSides(item)将取它。

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

it take "item. "

您可以使用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%"是由代码定义的-

希望对您有所帮助

相关文章：