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

Question

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

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

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

如您所见，我的拖动图标位于左侧。他不在 {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 团队:请求使用选项来处理此问题的功能。 :)

萨米K