¿Cómo deshabilitar el desplazamiento de página mientras arrastra arrastrable en jquery?

Tengo un arrastrable definido de esta manera:

$("#drag_area a").live("mouseup", function() { var object = $(this); var class_array = $(this).attr("class").split(" "); element(object,class_array); return false; }).draggable({ containment: "#drag_area", grid: [44, 44], zIndex: 1000 }).each(function(i, item){ }); 

Cuando arrastro un elemento del tipo ‘drag_area a’, si desplazo la página mientras la arrastro, el elemento sale de la contención … No es una situación deseada, ¿cómo puedo evitar esto? ¿Puedo deshabilitar el desplazamiento de página durante el arrastre?

Utilizará todos sus elementos arrastrables sin ningún contenedor , es decir, cuando arrastra y suelta sus elementos, la página completa se desplaza debido al arrastre.

En lugar de eso haz lo siguiente:

 

establecer un max-height y overflow de la clase dragWrapper como:

 .dragWrapper { max-height: 400px; overflow: auto; } 

Ahora cuando arrastra y suelta sus elementos, en lugar de su cuerpo , el desplazamiento estará dentro del contenedor solamente.

Espero que te haga el truco (que ya lo hizo;).

Echa un vistazo a este jsfiddle .
Lo he basado en esta pregunta SO: ¿Cómo deshabilitar el desplazamiento temporalmente?

Aquí hay un extracto:

 function disableScroll() { if (window.addEventListener) // older FF window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; } $("#draggable").draggable({ start: function () { disableScroll(); } });