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;">                                     <div id="status_16" class="statusAgile draggable">&nbsp;Open</div>                                </td>                             </tr>                         </table>                     </td>                                              <td width="25%" valign="top" class="sortable">                             <table width="100%" cellspacing="0" cellpadding="4px" class="draggableColumn" 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"><img id="handleColumn" src="./../web/img/line.png" /></div>                                         <div align="right">                                             <img id="deleteAgileColumn_11" src="./../web/img/delete.jpg" height="20px"/>                                         </div>        ...

JavaScript

$("#sortable").sortable({

            containment: "#containerColumns",

            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");
            }
        }).disableSelection();

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