Test Case Boilerplate

Fork this way...

by domnulnopcea

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">
<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr id="sortable">
        <td width="25%" valign="top">
            <table width="100%" cellspacing="0" cellpadding="4px" style="border: 1px solid #808080;">
                <tr>
                    <td align="left" style="border-bottom: 1px solid #808080; border-top: 1px solid #808080; height: 80px">Unmapped Statuses</td>
                </tr>
                <tr>
                    <td valign="top" style="height: 200px; border-bottom: 1px solid #808080;"></td>
                </tr>
            </table>
        </td>

        <td width="25%" valign="top" class="draggableColumn">
            <table width="100%" cellspacing="0" cellpadding="4px" style="border: 1px solid #808080;">
                <tr>
                    <td align="left" style="border-bottom: 1px solid #808080; border-top: 1px solid #808080; height: 80px" valign="top">To Do</td>
                </tr>
                <tr>
                    <td valign="top" style="height: 200px; border-bottom: 1px solid #808080;">Reopened</td>
                </tr>
            </table>
        </td>

        <td width="25%" valign="top" class="draggableColumn">
            <table width="100%" cellspacing="0" cellpadding="4px" style="border: 1px solid #808080;">
                <tr>
                    <td align="left" style="border-bottom: 1px solid #808080; border-top: 1px solid #808080; height: 80px" valign="top">In Progress</td>
                </tr>
                <tr>
                    <td valign="top" style="height: 200px; border-bottom: 1px solid #808080;">In Progress</td>
                </tr>
            </table>
        </td>

        <td width="25%" valign="top" class="draggableColumn">
            <table width="100%" cellspacing="0" cellpadding="4px" style="border: 1px solid #808080;">
     ...

JavaScript

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

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