Jquery-ui draggable scroll vertical only

jquery css jquery-ui jquery-ui-draggable jquery-ui-droppable
Caleb Doucet picture Caleb Doucet · Feb 7, 2012 · Viewed 19.9k times · Source

So I have a fixed droppable div in the bottom right of my screen. I have a list of draggables that can be dragged into the trash (the fixed droppable) but I don't want the horizontal scrollbar to appear when dragging them near the trash. I don't want the draggables to be able to scroll horizontally. There are other droppables further down on the page that they can be dropped into so they must scroll vertically to get to them.

Here is a jsfiddle of the the problem.

Thanks

Answer

Alejandro del Río picture Alejandro del Río · Mar 30, 2012

In order to only allow vertical dragging, you must set the "axis" property of the draggable this way:

$( "selector" ).draggable({ 
    axis: "y"
});

And if you already have an initialized draggable object, you must set it this way:

$( "selector" ).draggable( "option", "axis", "y" );

Related questions

jQuery - draggable div with zoom

This is my code: http://jsfiddle.net/652nk/ HTML <div id="canvas"> <div id="dragme"></div> </div> CSS #canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; …

Read More
Stop jQuery draggable from scrolling off screen

When using jQuery UI draggable on a div element you can drag the element "off" the right side of the page, but the page will simply extend and autoscroll with the element. This is problematic as I am trying to …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More