Wednesday 15 September 2010

With jquery ui draggable, is it possible to have different scrollsensitivity vertical versus horizontal? -



With jquery ui draggable, is it possible to have different scrollsensitivity vertical versus horizontal? -

i using jquery ui draggable , realized want scrollsensitivity much smaller when dragging downwards (versus left / right). possible have different settings vertical versus horizontal dragging?

here current code

$(".mydraggable").draggable( { stack: ".mydraggable", scroll: true, scrollsensitivity: 250, scrollspeed: 40, revert: function (event, ui) { $(this).data("uidraggable").originalposition = { top: 0, left: 0 }; homecoming !event; } } );

updated answer

working example: http://jsfiddle.net/22bpbsrw/3/

i think detecting when scroll event occurrs in viewport works. can set scroll speed , sensitivity then.

var lastscrolltop = 0, lastscrollleft = 0, delta = 5; $('#viewport').scroll(function (event) { var st = $(this).scrolltop(); var sl = $(this).scrollleft(); if (math.abs(lastscrolltop - st) > delta) { $("#draggable").draggable("option", "scrollsensitivity", 5); $("#draggable").draggable("option", "scrollspeed", 10); (st > lastscrolltop) ? console.log('scroll down') : console.log('scroll up'); lastscrolltop = st; } if (math.abs(lastscrollleft - sl) > delta) { $("#draggable").draggable("option", "scrollsensitivity", 100); $("#draggable").draggable("option", "scrollspeed", 40); sl > lastscrollleft ? console.log('scroll right') : console.log('scroll left'); lastscrollleft = sl; } }); old answer

left in case help others.

you cannot explicitly have different scrollsensitivity values each direction. maybe submit ticket enhancement?

you might able alter via drag function (based on answer). see working illustration here: http://codepen.io/anon/pen/mbups?editors=001

drag: function(e) { console.log($("#drag1").draggable( "option", "scrollsensitivity")); if(prevx == -1) { prevx = e.pagex; } // dragged left or right if(prevx > e.pagex || prevx < e.pagex) { // dragged right $("#drag1").draggable( "option", "scrollsensitivity", 100 ); } prevx = e.pagex; if(prevy == -1) { prevy = e.pagey; } // dragged or downwards if(prevy > e.pagey || prevy < e.pagex) { // dragged downwards $("#drag1").draggable( "option", "scrollsensitivity", 1 ); } prevy = e.pagey; }

you set scrollsensitivity based on direction of dragged element.

jquery jquery-ui scroll draggable jquery-ui-draggable

No comments:

Post a Comment