为什么我的jQuery UI sortable无法滚动？

Question

我在使用jQuery UI的sortable函数时遇到了问题，滚动似乎无法正常工作。

如果第二个列表（每个tbody中都创建了一个表格行的列表，并且每个tbody都是connect的）不可见，我希望可以向它滚动以便能够将我的表格行放置到该列表中。

这是我的HTML设置：

<ul>
    <li>
        <ul>
            <li>
                <table class="treeleerling">
                    <tbody class="oder0">

                        <tr class="suborder0">

                        </tr>
                        <tr class="sub1order">

                        </tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <table class="treeleerling">
                    <tbody class="oder1">

                        <tr class="suborder0">

                        </tr>

                        <tr class="suborder1">

                        </tr>
                    </tbody>
                </table>
            </li>
        </ul>
    </li>
</ul>

并且 jQuery 代码

$(document).ready(function() {
    $("#left tbody").sortable({
            connectWith : '#left tbody',
            scroll : true,
            scrollSensitivity: 40,
    });
});

排序没问题，但是滚动不起作用。我做错了什么吗？

更新： 我重构了代码，现在只使用列表中的列表项而不是表格体中的表格行。问题仍然存在。

- Sam Vloeberghs

Answer 1

这可能不适用于您的情况，但我想分享一下我在使用jQuery sortable时遇到的滚动问题的解决方案。我没有使用滚动div。为了使滚动正常工作，我需要从我的样式表中删除这行代码：

body {
  overflow-x: hidden; /* this line kept page scrolling from working */
}

我还将可排序的 "containment" 选项设置为 "document"（这使得项目无法向左/向右拖动而掉出页面，这也是我需要的）。

- craig

---

正如Craig所建议的那样，在body元素上设置CSS overflow属性可以阻止sortable的滚动功能。尽管在我的情况下，造成问题的是overflow-y，而不是overflow-x。 - Jonathan Nicol

Answer 2

我刚刚发现了这个问题。可能对你来说已经太晚了，但对于任何未来的访问者：

我曾经遇到过这个问题，不得不从我的CSS中删除以下行：

#sortable{overflow: auto;} /*delete this */

所以我猜任何分配给可排序的溢出可能是问题所在。

- Flink

---

对我也起作用了。我不得不删除Bootstrap 3添加的.table-responsive {overflow-x: auto}来解决这个问题。 - Y. E.

也适用于我...必须删除 div#wrapper { overflow: auto; }，现在它像魅力一样工作 :) - CodiMech25

Answer 3

抱歉，由于我对jQuery UI库的理解有限，无法检测到您代码中的任何错误。顺便问一下，滚动到目标div的代码在哪里？

这里有另一种解决此问题的方法，使用另一个jQuery插件：ScrollTo。

使用它很简单，一旦加载了插件，就像这样使用代码：

$.scrollTo('#your_target_element_id');

我在我的项目中一直在使用它，似乎在jQuery 1.4.2下仍然可以正常工作。

希望这可以帮到你 :)

- Michael Mao

---

尽管我非常喜欢scrollTo插件，但我不应该使用它。用户界面文档清楚地说明它应该滚动。为什么它不滚动呢.. :( - Sam Vloeberghs

现在我在某个地方读到，sortable函数/插件依赖于选择器是一个带有listitems init的列表。我设法重构我的代码只使用列表和listitems，但它仍然不起作用... - Sam Vloeberghs

我刚刚测试了我的先前声明，发现它是不正确的。问题中提供的标记在测试环境中可以正常工作。 - Sam Vloeberghs

你猜猜，你用的是哪个浏览器？你试过其他浏览器吗？去年我在使用jQuery UI，但当我将浏览器升级到Firefox 3.6后，有些小问题似乎不对了...我想知道这是否是库中的一致性问题 - 那么你真的无能为力 :( - Michael Mao