Попробуйте этот код:

HTML

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

Теперь, если вы нажмете на поле «перетаскиваемый» и переместите мышь вверх и вниз, она переместится до высоты контейнера.

Но если вы щелкнете мышью по этому окну и прокручиваете страницу (колесиком мыши ... или перемещая курсор вниз, не отпуская мышь), прямоугольник переместится над контейнером. И это отстой.

Это обычная ошибка? Как я могу исправить эту проблему?