4

我有两个列表，其中使用 jQuery sortable 我可以在它们之间移动项目。

$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();

overflow:hidden;但是，当我想使用自定义滚动条并在两个列表上进行设置时，我遇到了问题。我希望他们在一起max-height:400px。如果我设置溢出隐藏，我在将它们拖到一个 div 之外后看不到这些项目，如果我没有设置隐藏，列表将具有默认滚动条。任何人都可以提出解决方案。

谢谢

4

2 回答 2

6

如果您position:relative从列表中删除样式似乎可以按您的意愿工作。

http://jsfiddle.net/cCDcQ/2/

编辑：

我原以为使用 appendTo 选项可以解决这个问题，我是对的。经过一番摆弄，我得到了它的工作。这样，您可以在position:relative需要时保留它。

http://jsfiddle.net/cCDcQ/4/

于 2012-05-27T14:04:22.967 回答
0

我知道这张票有点过时了，但是我在使用自定义滚动条解决方案并尝试在隐藏溢出的情况下在 Sortable 之间拖动时遇到了同样的问题。在添加代码以修复 Sortable 以使用我的 Scrollpane 后，我注意到 appendTo 功能似乎有遗漏。

appendTo的代码仅在 DOM 中不存在帮助器时将其附加到目标。这就是为什么克隆选项适用于某些人（但不适用于所有人，我不会在这里讨论）。修复它的关键是将此代码添加到小部件的_mouseStart函数的末尾：

if (!this.helper.parent().is(this.appendTo)) {
    this.helper.detach().appendTo(this.appendTo);
    // update position
    this.offset.parent = this._getParentOffset();
}

注意this.appendTo是在函数的前面设置的：

this.appendTo = $( o.appendTo !== "parent" ?
        o.appendTo :
        this.currentItem.parent() );

With this fix in place, I specified an appendTo that targeted the div that contained both Sortable's and ceased to have the overflow issue.

The complete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github.com/borgboyone/jQuery-UI-ScrollPane.

Cheers!

于 2017-02-16T15:27:47.683 回答