JQuery draggable: draggable box iterates over container - error?

Question

Try this code :

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' }); 

Now, if you click on the "draggable" field and you move the mouse up and down, it will move to the height of the container.

But if you click on this field and scroll the page (using the mouse wheel ... or move the cursor to the bottom without releasing the mouse), the field will move through the container. And that sucks.

Is this a common mistake? How can I fix this problem?

Answer 1

I don't know if this is a mistake, but I solve this by adding overflow:auto to the .draggable_container css class. See here: http://jsfiddle.net/QhVNr/2/