Jquery-ui desplazable en desplazamiento vertical solo

Question

Así que tengo un div desplegable fijo en la parte inferior derecha de mi pantalla. Tengo una lista de juegos de arrastrar que se pueden arrastrar a la papelera (el elemento fijo que se puede quitar) pero no quiero que aparezca la barra de desplazamiento horizontal al arrastrarlos cerca de la papelera. No quiero que las arrastrables puedan desplazarse horizontalmente. Hay otros droppables más abajo en la página en los que se pueden soltar, por lo que deben desplazarse verticalmente para llegar a ellos.

Aquí hay un jsfiddle del problema.

Gracias

Answer 1

Puede utilizar la opción containment (doc) sobre los elementos que pueden arrastrarse. De esta manera puede limitar su movimiento en el elemento del cuerpo:

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

DEMO

Answer 2

Con el fin de permitir únicamente el arrastre vertical, se debe establecer la propiedad "eje" de la que pueden arrastrarse de esta manera:

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

Y si ya tiene un objeto arrastrable inicializado, debe establecer de esta manera:

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