Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
martinambrus

Window Auto-Scroll for Draggable?

Go to solution Solved by martinambrus,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a possibility to drag the window as I drag elements around in a window?

I mean, if the window is higher than what the browser can currently display, I need to scroll it down to reveal the rest of the page.

 

I have encountered questions about scrolling a container for the actual Draggable element itself, which is not what I'm after - I simply need to scroll the whole window/document, as I'm not limiting the drag to a container.

 

Thanks for any pointers you could give me here :)

Link to comment
Share on other sites

That functionality isn't baked-in, no, but you could use an onDrag to check the element's bounding rect and compare it to the window and scroll when you need to. Just an idea. 

Link to comment
Share on other sites

  • Solution

I've actually found a nice jQuery plugin that enables auto-scroll for droppables: https://groups.google.com/forum/#!searchin/threedubmedia/autoscroll/threedubmedia/Ffues0BsuN8/s9syU7PGgUUJ

 

I believe the code from it can be extracted and updated for use outside of jQuery as well, so I will post it here for reference (in case the link stops working):

 

jQuery.fn.autoScroll = function( arg, opts ){ 
        opts = opts || {}; 
        // the main element 
        var elem = this[0], 
        // the coordinates to calculate 
        XX = arg.pageX || arg.left || arg[0] || 0, 
        YY = arg.pageY || arg.top || arg[1] || 0, 
        // the optional options... 
        buffer = opts.buffer || 100, // pixels from edge 
        dist = opts.distance || 20, // pixels to scroll per call 
        // page/document scrolling... 
        page = !elem.ownerDocument || jQuery.nodeName(elem,'html'), 
        // the element to utilize 
        $elem = page ? jQuery( window ) : this.eq(0), 
        // the parameters to modify... 
        top = $elem.scrollTop(), left = $elem.scrollLeft(), 
        // attributes to calculate position 
        offset = page ? { top:0, left:0 } : $elem.offset(), 
        // calculate buffer zones 
        south = YY - offset.top - ( page ? top : 0 ), 
        north = $elem.height() + offset.top - YY - ( page ? top : 0 ), 
        east = XX - offset.left - ( page ? left : 0 ), 
        west = $elem.width() + offset.left - XX - ( page ? left : 0 ), 
        // calculate the distance to move... 
        vert = south < buffer ? -dist : north < buffer ? dist : 0, 
        hori = east < buffer ? -dist : west < buffer ? dist : 0; 
        // set the vertical scroll 
        if ( vert != 0 ) $elem.scrollTop( top + vert ); 
        // set the horizontal scroll 
        if ( hori != 0 ) $elem.scrollLeft( left + hori ); 
        // preserve jquery chain... 
        return this; 
};

$( window ).autoScroll( event ); 

Thanks for the pointer though, Jack :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×