Question

All

I have the following code which works fine until you try to scroll on the inner scroll bar:

<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>

The inner UL will drag after you’re done scrolling as can be seen here:

http://jsbin.com/isujuq/2

I have no idea how to solve this problem

Thanks!

Answer 1

Figured it out!

Went through a bit of documentation and bumped into the “cancel” option of sortable().

If you add a wrapper, such as a “div” element and make that overflow:scroll instead, you can use that same div as your cancel selector, as follows:

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