Sortable

by nickadeemus2002

HTML

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

<div id="info">sort order: 12345</div>

<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" class="ui-state-default">
            <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" class="ui-state-default">
            <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" class="ui-state-default">
            <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" class="ui-state-default">
            <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" class="ui-state-default">
            <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>
    </tbody>
</table>

<br />

<table id="data" style="width:100%;">
    <thead>
        <tr>
            <th...

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:#E1ECFD;       
}
thead th {
    border: 1px solid #D5DDE0;
    font-weight: bold;
    font-size:13px;
}
tbody td {
    border: 1px solid #FFF;
}

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }

#uber .ui-selecting { background: #FECA40; }
#uber .ui-selected { background: #F39814; color: white; }

JavaScript

$("table#uber tbody").selectable({
    filter: 'tr',
    cancel: 'td.sort'
}).sortable({
    delay: 100,
    axis: 'y',
    placeholder: 'ui-state-highlight',
    handle: 'td.sort',
    helper: function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        
        /*********************/
        /* Do something here */
        /*********************/
        
        return ui;
    },
    start: function(event, ui) {
        ui.placeholder.html('<td colspan="99">&nbsp;</td>');
    },
    update: function(event, ui) {
        document.body.style.cursor = 'wait';
        var arraied = $('table#uber tbody').sortable('toArray');
        $('#info').html('sort order: ');
        $.each(arraied, function(key, value) {
            $('#info').append(value);
        });

        // Ajax call to php file
        // On success
        document.body.style.cursor = 'default';
    },
    stop: function(event, ui) { /*  Reset and add odd and even classes     */
        $("#uber tr:even").removeClass("odd even").addClass("even");
        $("#uber tr:odd").removeClass("odd even").addClass("odd");
    }
}).disableSelection();

$("table#selectable tbody").selectable({
    filter: 'tr',
    cancel: 'td.sort'
}).disableSelection();

$("table#data tbody").sortable({
    delay: 100,
    placeholder: 'ui-state-highlight',
    // Deze fixHelper functie gebruiken ofwel die wat daaronder staat, maakt een cloon van de tr
    //helper: fixHelper,  
    handle: 'td.sort',
    helper: function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    },
    start: function(event, ui) {
        ui.placeholder.html('<td colspan="99">&nbsp;</td>');
    },
    stop: function(event, ui) { /*  Reset and add odd and even classes     */
        $("#data tr:even").removeClass("odd even").addClass("even");
        $("#data tr:odd").removeClass("odd even").addClass("odd");
   ...