Sortable_Selectable

by gkohen

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" type="text/css" />


<div id="availFacetsLayer">
<table id="availableFacetsTable" style="width:100%;" class="connectedFacetsLists">
    <thead>
        <tr class="ui-widget-header">
            <th style="width:10%;" id="facetPlusButton" ><button/></th>
            <th style="width:80%;">Available Facets</th>
            <th style="width:10%;">&nbsp;</th>
        </tr>              
    </thead>
    <tbody class="ui-widget-content">

    </tbody>
</table>
</div>
<div id="axisLayers">
    <div id="columnsAxisLayer">
<table id="columnsAxisTable" style="width:100%;" class="connectedFacetsLists">
    <thead>
        <tr class="ui-widget-header">
            <th style="width:5%;">&nbsp;</th>
            <th style="width:65%;">Columns</th>
            <th style="width:5%;">&nbsp;</th>
        </tr>              
    </thead>
    <tbody class="ui-widget-content addableFacetList">

    </tbody>
</table>
    </div>
    <div id="rowsAxisLayer">
<table id="rowsAxisTable" style="width:100%;" class="connectedFacetsLists">
    <thead>
        <tr class="ui-widget-header">
            <th style="width:5%;">&nbsp;</th>
            <th style="width:65%;">Rows</th>
            <th style="width:5%;">&nbsp;</th>
        </tr>              
    </thead>
    <tbody class="ui-widget-content  addableFacetList">

    </tbody>
</table>
    </div>    
</div>

CSS

html {
    overflow-y:scroll;       
    overflow-x:scroll;       
}
body {
    font-family:verdana;   
    font-size:12px;    
}
.even{
    background: #F3F3F3;
}
.odd{
    background: #F9F9F9;
}
td, th {

    height:25px;
    
}
tbody tr:hover {
    background:#FECA40;       
}
thead th {
    border: 0px solid #D5DDE0;
    font-weight: bold;
    font-size:13px;
    padding: 0px;
}
table,table td {
    border: 0px ;
    padding: 0px;
    border-spacing:0px;
}
#availableFacetsTable .ui-selecting {
    background: #FECA40;
}
#availableFacetsTable.ui-selecting {
    background: #FECA40;
}
.connectedFacetsLists .ui-icon-close { 
    background-image: url(http://jqueryui.com/themeroller/images/?new=ff0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}
.connectedFacetsLists .ui-icon-plusthick { 
    background-image: url(http://jqueryui.com/themeroller/images/?new=ff0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}
.ui-state-highlight {
    background:#DED7D7 !important;
}
#availFacetsLayer{
    float:left;
    width:50%;
}
#axisLayers{
    float:right;
    width:40%;
}
#columnsAxisLayer,#rowsAxisLayer{
    height:40%;

}

.connectedFacetsLists tbody{
    min-height: 30px;
    min-width: 128px;
}
.ui-icon-fix-by-max
{
    display: inline-block;
    vertical-align: text-bottom;
    -webkit-box-shadow: none;
}
#rowsAxisLayer{
    margin-top:50px;
}

JavaScript

var first_rows = {};
var availFacetsArray={'facet1':"Demand Group",'facet2':"Location",'facet3':"Product"};
                      

$(".connectedFacetsLists tbody").selectable({ // Add selectable to the table
    filter : '>*:not(.sort-disabled)', // Use selectable on tr    
    cancel : 'td.sort' // Disallow selectable on the first td (with the arrow)
// Add sortable to the table
}).sortable({
    delay : 100, // Delay so user won't sort by accident

    placeholder : 'ui-state-highlight', // Add a class for the placeholder
    handle : 'td.sort', // Only allow sortable on the first td (with the arrow)   
    // Hack to increase the placeholder width
    helper : function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    },
    connectWith: ".connectedFacetsLists tbody",
    // Start sorting
    start : function(event, ui) {
        // Clone selected items
        if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
            first_rows = ui.item.siblings('.ui-selected').andSelf().removeAttr('style').clone(true);
            ui.item.siblings('.ui-selected').andSelf().addClass('cloned');
        }

        // Hack for placeholder height (this should be altered)
        var placeholder = 25 * first_rows.length;
        if(!placeholder)
        {
            placeholder = 25;
        }
        ui.placeholder.html('<td style="height:' + placeholder + 'px !important" colspan="99">&nbsp;</td>');
    },
    // Update
    update : function(event, ui) {
        
    },
    deactivate: function(e, ui) {
    
            sizeCheck(this);
    
         },
    // Stop sorting
    stop : function(event, ui) {
        
        document.body.style.cursor = 'wait'; // Set cursor to wait
        
        // Insert cloned rows
        if (first_rows.length > 1) {
            for ( i = 0; i < first_rows.length; i++) {
                $(first_rows[i]).insertBefore(ui.item);
           ...