Sortable Containment

Containing jQuery UI sortable widgets using the containment and axis options.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css">
<div class=".parent">
<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

</div>

CSS

body {
    font-size: 0.8em;
}

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 30%;
}
#sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    height: 16px;
    text-align: center;
    cursor: move;
}

/*
 * Theme settings
 *
 */
.ui-state-default {
    background-image: none;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

JavaScript

$(function () {
    $( "#sortable li" ).addClass([
        "ui-state-default",
        "ui-corner-all",
        "ui-widget"
    ].join( " " ));
    $( "#sortable" ).sortable({
        axis: "y",
        containment: ".parent"
    });
});