Sortable_Selectable

by gkohen

HTML

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

<br />
<div id="info"></div>
<br />

<table id="uber" style="width:100%;">
    <thead>
        <tr class="ui-widget-header">
            <th style="width:5%;">&nbsp;</th>
            <th style="width:65%;">Title</th>
            <th style="width:20%;">Name</th>
            <th style="width:10%;">&nbsp;</th>
        </tr>              
    </thead>
    <tbody class="ui-widget-content">
        <tr id="1">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 1</td>     
            <td>name 1</td>         
            <td>icon 1</td>                     
        </tr>
        <tr id="2">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 2</td>         
            <td>name 2</td>               
            <td>icon 2</td>                        
        </tr>
        <tr id="3">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 3</td>     
            <td>name 3</td>      
            <td>icon 3</td>                  
        </tr>
        <tr id="4">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 4</td>    
            <td>name 4</td>    
            <td>icon 4</td>                
        </tr>
        <tr id="5">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 5</td>        
            <td>name 5</td>        
            <td>icon 5</td>                    
        </tr>
        <tr id="6">
            <td class="sort"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
            <td>item 6</td>        
            <td>name 6</td>        
            <td>icon 6</td>                    
        </tr>
        <tr...

CSS

html {
    overflow-y:scroll;       
}
body {
    font-family:verdana;   
    font-size:12px;    
}
.even{
    background: #F3F3F3;
}
.odd{
    background: #F9F9F9;
}
td, th {
    padding:0 0 0 10px;
    height:25px;
    
}
tbody tr:hover {
    background:#FECA40;       
}
thead th {
    border: 1px solid #D5DDE0;
    font-weight: bold;
    font-size:13px;
}
tbody td {
    border: 1px solid #FFF;
}
#uber .ui-selecting {
    background: #FECA40;
}
#uber .ui-selected { 
    background: #F39814;
    color: white;
}
.ui-state-highlight {
    background:#DED7D7 !important;
}

JavaScript

var first_rows = {};

$("table#uber tbody").selectable({ // Add selectable to the table
    filter : 'tr', // 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
    axis : 'y', // Sort by Y axis, users can't drag the row to left or right
    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;
    },
    // 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) {
        
    },
    // 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);
            }
            $('.cloned').remove();
          delete first_rows;
          first_rows = {};
        }
        
        // Update sort order info
        var arraied = $('table#uber...