Jquery-ui draggable scroll vertical only

Question

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

MyNameIsNotMcThomasJohannson · Accepted Answer · 2013-11-04 20:30:33Z

31

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" );

edited Nov 4, 2013 at 20:30

MyNameIsNotMcThomasJohannson

1299 bronze badges

answered Mar 30, 2012 at 0:30

Alejandro del Río

4,0564 gold badges36 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caleb Doucet Over a year ago

This is not what I meant. I only wanted it to "scroll" vertically and it can move horizontally. The question has already been answered but Thanks for the answer though.

prototype Over a year ago

this was just the thing I was looking for

Didier Ghys · Accepted Answer · 2012-02-07 16:17:29Z

13

You can use the containment option (doc) on the draggable elements. This way you can constrain their movement into the BODY element:

$('.draggable').draggable({
    ...
    containment: 'body',
    ...
});

DEMO

answered Feb 7, 2012 at 16:17

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

7 Comments

Caleb Doucet Over a year ago

But I can't drag it down to the droppables.

Didier Ghys Over a year ago

Sure you can (or I don't get exactly the problem). The body will still scroll its viewport but will no extend if the cursor goes too far bottom or right.

Caleb Doucet Over a year ago

The problem now is that the body doesn't go all the way to the bottom.

xCRKx TyPHooN Over a year ago

It looks like @Didier Ghys solution works fine, just tested it in your fiddle.

Caleb Doucet Over a year ago

@Didier Ghys I figured it out... The reason it is being blocked is because those elements at the bottom are either fixed or absolute position not causing the body to expand it's height. This was not a problem in my live version but I had a div with a set height which grew bigger than that height so I removed the height and it now workds. Thanks for the help.

|

Collectives™ on Stack Overflow

Jquery-ui draggable scroll vertical only

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related