jQuery Sortable - scrolling in div with overflow:auto

Question

I have a page using jQuery with some lists which have been made sortable. The list is inside a div which has a fixed height and overflow set to auto in the stylesheet.

The scroll attribute of sortable seems to affect the scrolling of the whole page, is there any way I can make the container div automatically scroll up or down when the mouse is near the edge?

Thanks

Graeme

Answer 1

Thanks to both Max and Fyasar. I got it to work with Jquery 1.4.2. The only thing I have to change is

$().mousemove(function(e) {...});
//change it to 
this.mousemove(function(e) {...});

Now sortable in a fixed div with fixed height and overflow:auto is working nicely now. Thank!

Answer 2

I would take a look at this jQuery plugin I've used and found quite nice:

http://rascarlito.free.fr/hoverscroll/

Bye, Cyril

Answer 3

I was able to get fyasar's solution implemented and it works great for me. I extended his plugin slightly and wanted to post it here for anyone else who stumbles across his great little bit of code.

The problem I ran into with his solution was that it didn't give the flexibility to control where the "margin" at the top and bottom of the box that would kick off the scrolling would be situated. That bit was hardcoded in his solution.

I extended the logic a bit and changed the plugin to accept the top and bottom offsets to control the size of that margin at the top and bottom of the box.

Those options are now defaulted to what I found to be the most reasonable points to scroll at. But each usage of the control can pass in the desired range as parameters.

    (function($) {
    $.fn.setEdgesAutoScrollable = function(options) {
        var defaults = {
            scrollspeed: 200,
            incrementSeed: 20,
            topOffsetTop: -10,
            topOffsetBottom: 30,
            bottomOffsetTop: -20,
            bottomOffsetBottom: 20
        };

        var options = $.extend(defaults, options)

        var top = $(this).offset().top;
        var left = $(this).offset().left;
        var height = $(this).height();
        var width = $(this).width();
        var selectedItemSelector = this.selector;

        var bottom = (top + height);
        var right = (left + width);

        var xmin = left;
        var xmax = right + 20; // take scrollbar into account

        var topScrollTop = top + defaults.topOffsetTop;
        var topScrollBottom = top + defaults.topOffsetBottom;

        var bottomScrollTop = bottom + defaults.bottomOffsetTop;
        var bottomScrollBottom = bottom + defaults.bottomOffsetBottom;

        $().mousemove(function(e) {

            var myPageX = e.pageX;
            var myPageY = e.pageY;

            if (myPageX > xmin && myPageX < xmax) {

                if (myPageY > topScrollTop && myPageY < topScrollBottom) {
                    //top edges
                    $(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else if (myPageY > bottomScrollTop && myPageY < bottomScrollBottom) {
                    //bottom edges
                    $(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else {
                    $(selectedItemSelector).stop();
                }
            }

            return true;
        });
    }
})(jQuery);

I hope this helps anyone else running into this problem with the great jquery.ui sortable control.

• Max

Answer 4

Graeme, I tried your scripterlative.com opinion, but a few days after this guy's script expired and display the trial info message on the screen :)

After, I developed a small jquery plugin for easily solving this issue.

When you use the this plugin, it will detect the selector elements edges automatically, On the other hand you can also put jquery's sortable to the inside of this divs.

Don't forget this plugin depends on Jquery.Scrollto plugin.

It solved my problem, i hope it will help to you.

Plugin source is ;

/*
* jQuery Html element edges auto scrollable plugin.
*
* Copyright (c) 2009 Fatih YASAR
*/
(function($) {
    $.fn.setEdgesAutoScrollable = function(options) {
        var defaults = {
            scrollspeed: 200,
            incrementSeed: 20
        };

        var options = $.extend(defaults, options)

        var top = $(this).offset().top;
        var left = $(this).offset().left;
        var height = $(this).height();
        var width = $(this).width();
        var selectedItemSelector = this.selector;

        var xmin = left;
        var xmax = (width + left) + 20;

        var ymin = (height + top) + 10;
        var ymax = (height + top) + 30;


        $().mousemove(function(e) {
        if (e.pageX > xmin && e.pageX < xmax) {
                if (e.pageY > (top - 10) && e.pageY < (top + 10)) {
                    //top edges
                    $(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else if (e.pageY > ymin && e.pageY < ymax) {
                    //bottom edges
                    $(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else {
                    $(selectedItemSelector).stop();
                }
            }

            return true;
        });
    }
})(jQuery);

Html page example for demonstrating how to use. Html page source is ;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script src="js/[plugin src]" type="text/javascript"></script>
    <style>
    body
    {
        font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
        font-size:13px;
    }

     .scrollable-wrapper
     {
        width:650px;
        height:350px;
     }   
     .scrollable-area
     {
        float:left;
        width:220px;
        height:350px;
        border:solid 2px #ccc;   
        margin-left:20px;      
        overflow:auto;
     }
    </style>
    <script>
        $(function() {
            $("#scrollable-area1").setEdgesAutoScrollable();
            $("#scrollable-area2").setEdgesAutoScrollable();
        });
    </script>
</head>
<body>
    <div class="scrollable-wrapper">
      <div id="scrollable-area1" class="scrollable-area">
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>     
      </div>
      <div id="scrollable-area2" class="scrollable-area">
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>      
      </div>
    </div>

</body>
</html>

Answer 5

See if you can make use of the jQuery scrollTo plugin. I'm assuming you're talking about automatic scrolling depending on the proximity of the mouse to the edges of the container div.