jQuery có thể kéo được: hộp có thể kéo qua vùng chứa - lỗi?

Question

Hãy thử this mã:

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

Bây giờ, nếu bạn bấm vào hộp "kéo" và bạn di chuyển chuột lên và xuống, nó sẽ di chuyển cho đến khi chiều cao container.

Tuy nhiên, nếu bạn nhấp chuột vào ô này và bạn cuộn trang (bằng bánh xe chuột ... hoặc di chuyển con trỏ xuống dưới cùng, mà không nhả chuột) hộp đi qua vùng chứa. Và điều này hút.

Đây có phải là lỗi phổ biến không? Làm cách nào để khắc phục sự cố này?

Answer 1

Tôi không biết đây có phải là lỗi hay không, nhưng tôi giải quyết nó bằng cách thêm overflow:auto vào lớp học css .draggable_container. Xem tại đây: http://jsfiddle.net/QhVNr/2/