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