jquery sortable 的绝对定位“句柄”问题-在可排序元素范围之外时不影响排序

Question

我遇到了一个无法解决的问题。

我有一个类似 Basecamp 的项目列表，左侧有一个小菜单，其中有“拖动”、“编辑”和“垃圾箱”图标。

手柄就在那里。他位于可排序元素的范围之外，这就是为什么他根本不影响排序。

正如你所看到的，我的拖动图标位于左侧。他不在 {LI} 范围内。 LI 在 char 结束的地方结束，因此 Handle 脱离了他的父级，不会影响所有排序，也不会启动它。

当我拖动它并将鼠标移动到 LI 的边界内时，它会像预期的那样影响和排序。

我能做些什么。我绞尽脑汁寻找句柄偏移的属性，或者任何为他定义我的句柄超出你的范围的方法。

我希望任何人过去遇到过这件事并且可能会有所帮助:) 我想放一个子弹图像背景，这样可以给 LI 左边更多的空间。 可能会成功...:)

谢谢

Answer 1

我可以通过覆盖确定光标是否位于元素上方的方法来解决此问题。由于我的列表与您的列表一样是垂直的，因此我撕掉了水平位置的检查，以便它只检查垂直位置。这样，光标水平位置在哪里并不重要。

只需将其放在主 jquery.ui.js 包含之后和可排序代码之前即可覆盖该方法：

// UI Fix for draggable
$.extend($['ui']['sortable'].prototype, {
    _intersectsWithPointer: function(item) {

        var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

        if (!isOverElementHeight)
            return false;

        return this.floating ?
            ( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
            : ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );

    }
});

显然，这会破坏水平排序的功能，因此您只想将其包含在特殊情况下。

亲爱的 jQuery UI 团队：请求使用选项来处理此问题的功能。 :)

萨米克

Answer 2

我也有同样的问题。

我注意到这里提交了一个未解决的错误： http://bugs.jqueryui.com/ticket /3022#comment:9

以及声称解决该问题的拉取请求： https://github.com/jquery/jquery-ui/pull/915

这么多年了还没有修复，有点蛋疼。

不管怎样，我正在考虑像 SammyK 建议的那样进行更改，但后来注意到 v1.10.3 中有一个 axis 选项。我不确定这是否存在于以前的 jQuery UI 版本中。

但是设置 axis 为我解决了这个问题：

$('.items').sortable({
  containment:'parent',
  handle:'.move',
  opacity:0.5,
  axis:'y'
});

我的手柄现在可以位于可拖动项目之外，但仍然能够正确地上下拖动项目。