Test Case Boilerplate

Fork this way...

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="category">
    <div class="items">
        <div class="item"><span>Item 01</span></div>
        <div class="item"><span>Item 02</span></div>
        <div class="item"><span>Item 03</span></div>
        <div class="item"><span>Item 04</span></div>
        <div class="item"><span>Item 05</span></div>
        <div class="item"><span>Item 06</span></div>
        <div class="item"><span>Item 07</span></div>
        <div class="item"><span>Item 08</span></div>
        <div class="item"><span>Item 09</span></div>
        <div class="item"><span>Item 10</span></div>
        <div class="item"><span>Item 11</span></div>
        <div class="item"><span>Item 12</span></div>
    </div>
</div>
<div class="category">
    <div class="items">
        <div class="item"><span>Item 01</span></div>
        <div class="item"><span>Item 02</span></div>
        <div class="item"><span>Item 03</span></div>
        <div class="item"><span>Item 04</span></div>
        <div class="item"><span>Item 05</span></div>
        <div class="item"><span>Item 06</span></div>
        <div class="item"><span>Item 07</span></div>
        <div class="item"><span>Item 08</span></div>
        <div class="item"><span>Item 09</span></div>
        <div class="item"><span>Item 10</span></div>
        <div class="item"><span>Item 11</span></div>
        <div class="item"><span>Item 12</span></div>
    </div>
</div>

CSS

.category { clear: both; }
.items {
    width: 300px;
    height: 200px;
    padding: 0;
    margin-bottom: 20px; 
    border: 3px solid red;
    clear: both;
}
.item {
    float: left;
    width: 70px;
    height: 25px;
    padding: 10px;
    list-style: none;
    cursor: pointer;
    color: white;
    background: #33AAFF;
    border: 1px solid silver;
    border-radius: 10px;
}
.item span { font-size: 20px !important; }

JavaScript

$('.items').sortable({
    connectWith: '.items'
}).disableSelection();