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

                                            <td width="25%" valign="top" class="sortable 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">
                                        <div align="center" class="handleColumn">
                                            aaaaa
                                        </div>
                                        
                                        <div class="headerPageText">To Do</div>
                                    </td>
                                </tr>

                                <tr><td...

JavaScript

$("#sortable").sortable({

            containment: "#containerColumns",
            tolerance: "pointer",
            start: function(e, ui){
                ui.placeholder.height(ui.item.height());
                ui.placeholder.width(ui.item.width());
                ui.placeholder.css("visibility", "visible");
                ui.placeholder.css("background-color", "#CCCCCC");
            },
            cursor: 'move'
        }).disableSelection();

        $(".draggableColumn").draggable({
            containment: "#containerColumns",
            cancel: '.notSortable',
            connectToSortable: "#sortable",
            scroll: false,
            zIndex: 111,
            handle: '.handleColumn',
            cursor: 'move'
        });