jQuery UI sortable containtment scroll

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<ul id="list-1" class="sortable">
    <li>Drag me to the bottom.
        <br/>My bounds are outside!!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<ul id="list-2" class="sortable">
    <li>Drag me to the bottom.
        <br/>I am trapped!!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    border: 1px solid gray;
    list-style: none;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
    width: 190px;
    border: 1px solid black;
    float: left;
    margin: 5px;
}
li {
    background: white;
    border: 1px solid gray;
    height: 50px;
}

JavaScript

$( ".sortable" ).sortable({
    containment: "parent"
});