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">
<ul style="width:100%;" id="sortable">
    <li>
        <div>statuses</div>
    </li><li class="draggableColumn">
        <div>To Do</div>
    </li><li class="draggableColumn">
        <div>In Progress</div>
    </li><li class="draggableColumn">
    <div>Done</div>
    </li>
</ul>
<script src="http://localhost:8888/jquery-ui/ui/draggable.js"></script>
<script src="http://localhost:8888/jquery-ui/ui/sortable.js"></script>

CSS

div {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid #808080;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    margin: 0;
    padding: 0;
    width: 25%;
    list-style: none;
    display: inline-block;
}

JavaScript

$("#sortable").sortable();

$(".draggableColumn").draggable({
    connectToSortable: "#sortable"
});