jquery sortable scroll problem

Question

Hi

I'm having problems using the sortable function of jQ:uery UI. The scroll doesn't seem to work..

If the second list ( lists are created on the table rows in a tbody and each tbody is connect ) isn't visible I want it to be possible to scroll towards it for dropping my table row.

This is my HTML set up:

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

And jQuery code

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

The sorting works fine, but the scrolling doesnt.. I'm doing something wrong or what? Plz help and advice.. Thx in advance!

Update : I refactored the code to use only listitems in a list instead of table rows in a table body. Same problem still occurs

Answer 1

Hi Sam:

Sorry I cannot detect any error in your code due to my limited understanding of the jQuery UI library. BTW, where is the code for scrolling down to the div of destination?

Here is another way to walk around this issue, use another jQuery plugin : ScrollTo, instead.

To use it is simple, once the plugin is loaded, use code as this:

$.scrollTo('#your_target_element_id');

I have been using it in my projects, and it seems still okay with jQuery 1.4.2

Hope this helps :)

Answer 2

This may not apply to your case, but I thought I would post my solution to a scolling problem with jquery sortable that I was having. I'm not using a scrolling div. To get scrolling to work, I had to remove this line from my stylesheet:

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

I also set the sortable 'containment' option to 'document' (which kept the item from being dragged left/right off the page, which is also what I needed).