With jquery ui draggable, is it possible to have different scrolling vertically or horizontally?

Question

I am using jquery ui draggable , and I realized that I want the sensitivity scroll to be much less when dragging down (against left / right). Is it possible to have different settings for vertical and horizontal drag and drop?

Here is my current code

$(".myDraggable").draggable( { stack: ".myDraggable", scroll: true, scrollSensitivity: 250, scrollSpeed: 40, revert: function (event, ui) { $(this).data("uiDraggable").originalPosition = { top: 0, left: 0 }; return !event; } } ); 

Answer 1

Updated Answer

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

I think that detecting when a scroll event occurs in the viewport really works. You can set the scroll speed and sensitivity.

 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

On the left just in case, this can help others.

You cannot explicitly have different scrollSensitivity values ​​for each direction. Maybe you can send a ticket for this improvement?

You might be able to change it using the drag and drop function ( based on this answer ). See a working example 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 up or down if(prevY > e.pageY || prevY < e.pageX) { // dragged down $("#drag1").draggable( "option", "scrollSensitivity", 1 ); } prevY = e.pageY; } 

You can set scrollSensitivity depending on the direction of the item being dragged.

Answer 2

Although the JSuar solution works, I also want to try.

Solving the problem with jQuery UI Draggable Widget is not possible.

There is no explicit function to get information about moving an object vertically or horizontally. In fact, in most cases, the object moves in both directions . But we could define our own function to see how the cursor moved.

Use a custom function to get information about a draggable object.

The idea is to fire the event on mousemove and check the cursor position each time. After a certain interval of mousemovements, we check the overall movement to set the scroll. In this case, we simply assume that the user is likely to move in one direction for the following movements.

Here is a working JSFiddle example.

HTML

 <div id="viewPort"> <div id="draggable">drag me</div> </div> 

CSS

 #viewPort { width: 300px; height: 300px; background: #fff; overflow:scroll; border:1px solid #ccc; } #draggable { color: #fff; width: 75px; height: 75px; padding: 10px; background: #333399; border:1px solid #ccc; margin:5px; } 

Js

 //current count of how often we got the mouse positon var count = 0; //position of mouse at last function call var lastPositionX; var lastPositionY; //how often we moved in one direction in the last intervall var movedX; var movedY; //intervall to check movement again var countIntervall = 30; $("#draggable").draggable({ scrollSensitivity: 1000, scrollSpeed: 40, revert: function (event, ui) { $("#draggable").originalPosition = { top: 0, left: 0 }; return !event; }, drag: function (e) { setScrollSensivity(); } }); //init first mousepostion $("#draggable").on('click', function() { lastPositionX = event.pageX; lastPositionY = event.pageY; }); function setScrollSensivity(){ count++; //get current mousepostion var currentPositionX = event.pageX; var currentPositionY = event.pageY; //increase if moved on chose axis if ( currentPositionX != lastPositionX ){ movedX++; } if ( currentPositionY != lastPositionY ){ movedY++; } //if moved more on x axis decrease sensivity, else increase. if (count == countIntervall){ if (movedX > movedY){ console.log("moving on X axis"); $( "#draggable" ).draggable( "option", "scrollSensitivity", 10 ); } else { console.log("moving on Y axis"); $( "#draggable" ).draggable( "option", "scrollSensitivity", 200 ); } //reset all the counters and start again count = 0; movedX = 0; movedY = 0; } //set last position for our next function call lastPositionX = currentPositionX; lastPositionY = currentPositionY; }