Test Case Boilerplate

Fork this way...

by BlazeCell

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">
<body>
    
    <div class="content">
        <div class="categories">
            <div class="category">
                <h3>Category 1</h3>
                <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">
                <h3>Category 2</h3>
                <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...

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

$(function()
{
    $('.items').sortable(
    {
        appendTo: '.content',
        connectWith: '.items',
        helper: 'clone',
        revert: 200,
        cursor: 'move',
        tolerance: 'pointer'
    }).disableSelection();
});