当元素达到一个很高的高度时，jquery ui可排序无法拖动到底部

Question

$(document).ready(function () {
    // Sort the parents
    $(".sortable").sortable({
        containment: "document",
        items: "> div",
        handle: ".move",
        tolerance: "pointer",
        cursor: "move",
        opacity: 0.7,
        revert: 300,
        delay: 150
    });

    // Sort the children
    $(".group-items").sortable({
        items: "> div",
        tolerance: "pointer",
        containment: "parent"
    });
})

.group-caption {
    background: #D3CAAF;
    width: 400px;
    display: block;
    padding: 20px;
    margin: 0 0 15px 0;
}
.group-item {
    background: #5E5E5E;
    width: 300px;
    height: 30px;
    display: block;
    padding: 3px;
    margin: 5px;
    color: #fff;
}
.move {
    background: #ff0000;
    width: 30px;
    height: 30px;
    float: right;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 30px;
    font-family: Arial;
    cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
    <div class="group-caption">
         <h4>PARENT #1</h4>

        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #1
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #2
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #3
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #4
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #5
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #6
                <div class="move">+</div>
            </div>
        </div>
    </div>
    <div class="group-caption">
         <h4>PARENT #2</h4>

        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #3
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #4
                <div class="move">+</div>
            </div>
        </div>
    </div>
    <div class="group-caption">
         <h4>PARENT #3</h4>

        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #1
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #2
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #3
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #4
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #5
                <div class="move">+</div>
            </div>
            <div class="group-item">CHILD #6
                <div class="move">+</div>
            </div>
        </div>
    </div>
</div>

我使用jQuery UI进行排序以执行可排序列表。 当一个div.group-caption有更多div.group-items时，它就不能用于bototm。但它可以被提升，甚至到顶部。 我该怎么做才能解决这个问题？非常感谢。