JQuery-UI 嵌套可排序和滚动

Question

全部

我有以下代码，在您尝试在内部滚动条上滚动之前，该代码可以正常工作:

<ul class="meh">
            <li>
                <a href="#">TEXT 1</a>
                <ul class="meh">
                    <li>
                        <a href="#">TEXT 1</a>
                    </li>
                    <li><a href="#">TEXT 2</a></li>
                    <li><a href="#">TEXT 3</a></li>
                    <li><a href="#">TEXT 4</a></li>
                    <li><a href="#">TEXT 5</a></li>
                    <li><a href="#">TEXT 6</a></li>
                    <li><a href="#">TEXT 7</a></li>
                    <li><a href="#">TEXT 8</a></li>
                    <li><a href="#">TEXT 9</a></li>
                    <li><a href="#">TEXT 10</a></li>
                </ul>
            </li>
            <li><a href="#">TEXT 2</a></li>
            <li><a href="#">TEXT 3</a></li>
            <li><a href="#">TEXT 4</a></li>
            <li><a href="#">TEXT 5</a></li>
            <li><a href="#">TEXT 6</a></li>
            <li><a href="#">TEXT 7</a></li>
            <li><a href="#">TEXT 8</a></li>
            <li><a href="#">TEXT 9</a></li>
            <li><a href="#">TEXT 10</a></li>
        </ul>

        <script type="text/javascript">
            $(function(){
                $(".meh").sortable();
            });
        </script>

滚动完成后，内部 UL 将拖动，如下所示:

http://jsbin.com/isujuq/2

我不知道如何解决这个问题

谢谢!

Answer 1

明白了!

浏览了一些文档并遇到了 sortable() 的“取消”选项。

如果您添加一个包装器(例如“div”元素)并将其设置为“overflow:scroll”，则可以使用相同的 div 作为取消选择器，如下所示:

$(".meh").each(function(){
    $(this).sortable({cancel: ".scrollable"});
});