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

Answer 1

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