Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="c1" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

<div id="c2" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<div id="c3" class="containment">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.containment {
    border: 1px solid green;
    margin: 50px;
}
.item {
    width: 100px;
    height: 100px;
    background: #E0E0E0;
    border: 5px solid #0000A0;
    text-align: center;
    line-height: 100px;
}
#c1 {
    width: 330px;
    height: 330px;
}
#c1 .item, #c2 .item {
    float: left;
}
#c2 {
    width: 440px;
    height: 110px;
}
#c3 {
    width: 110px;
    height: 440px;
}

JavaScript

// Default sortables

$('#c1').sortable({
    'containment': '#c1'
});

$('#c2').sortable({
    'containment': '#c2',
    'axis': 'x'
});
$('#c3').sortable({
    'containment': '#c3',
    'axis': 'y'
});