page scroll on drag

412 views
Skip to first unread message

le....@gmail.com

unread,
Apr 14, 2009, 10:43:17 AM4/14/09
to threedubmedia
Hi there,

First would like to say this is an awesome plugin. I'm having a little
issue on trying to drag an element to a drop location which is not in
view. In other words, dragging an element so that the page is able to
scroll. Have you came across this?
Thanks in advanced.

Paul

3wme

unread,
Apr 14, 2009, 5:10:25 PM4/14/09
to threedubmedia
Try this out... it is an unreleased plugin...

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

You can use it in your "drag" handler like so...

$( window ).autoScroll( event );

Or use it on any other scrollable element. Instead of an event, you
can pass in an object literal with top/left properties or an array
with x (0) and y (1) coordinates. A second argument could be included
to set additional options for controlling the effect: "buffer" - the
closeness to en edge to begin scrolling, or "distance" - the number of
pixels to scroll for each method call.

ambrus.j...@gmail.com

unread,
Jun 2, 2014, 6:52:44 AM6/2/14
to threed...@googlegroups.com
... lolz, 5 years after :)))
This really worked though, thanks a lot!
Reply all
Reply to author
Forward
0 new messages