jQuery que se puede arrastrar: el cuadro que se puede arrastrar pasa por el contenedor - ¿error?

Question

Trate this código:

HTML

<div class="draggable_container"> 
    <div id="draggable_1" class="draggable"> 
     <div class="exp"><!-- --></div> 
    </div> 
</div> 

CSS

html 
{ 
    height:3000px; 
} 

.draggable_container 
{ 
    height:300px; 
    background-color:red; 
    width:140px; 
} 

.draggable 
{ 
    height:60px; 
    width:130px; 
    cursor:pointer; 
    border:5px solid #000000; 
    background-color:#ffffff; 
} 

jQuery

$(".draggable").draggable({ 
    axis: "y", 
    containment: 'parent' 
}); 

Ahora, si hace clic en la casilla "arrastrable" y mover el ratón arriba y abajo, se moverá hasta la altura del contenedor.

Pero, si hace clic con el mouse en esta casilla, y desplaza la página (con la rueda del mouse ... o mueve el cursor hacia abajo, sin soltar el mouse) la caja pasa por el contenedor. Y esto apesta.

¿Es un error común? ¿Cómo puedo solucionar este problema?

Answer 1

No sé si esto es un error, pero lo resuelvo agregando overflow:auto a la clase .draggable_container css. Véalo aquí: http://jsfiddle.net/QhVNr/2/