JSFiddle - React, Tailwind, and code Playground

by Konstantin Heinrich

HTML

<table id="topo1" class="connected">
    <tr class="sortable" id="1">
        <td class="error">
            <div  >
                <table>
                    <tr>
                        <td rowspan="2" class="tdRowspan" style="width:600px;">Irgendwas muss getan werden ..</td>
                        <td rowspan="2" class="tdRowspan" style="width:100px;">13</td>
                        <td rowspan="2" class="tdRowspan" style="width:200px;">hoeltl</td>
                        <td style="width:200px;">139213</td>
                        <td style="width:200px;">4711</td>
                    </tr>
                    <tr>
                        <td>17.08.2001</td>
                        <td>Konstantin Heinrich</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr class="sortable" id="2">
        <td class="ok">
            <div >
                <table>
                    <tr>
                        <td rowspan="2" class="tdRowspan" style="width:600px;">Installer updatee</td>
                        <td rowspan="2" class="tdRowspan" style="width:100px;">8</td>
                        <td rowspan="2" class="tdRowspan" style="width:200px;">hoeltl</td>
                        <td style="width:200px;">111223</td>
                        <td style="width:200px;">4714</td>
                    </tr>
                    <tr>
                        <td>06.09.2013</td>
                        <td>Georg Müller</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr class="sortable" id="3">
        <td class="warn">
            <div  >
                <table>
                    <tr>
                        <td rowspan="2" class="tdRowspan" style="width:600px;">Installhen System</td>
                        <td rowspan="2" class="tdRowspan" style="width:100px;">3</td>
                        <td rowspan="2" class="tdRowspan" style="width:200px;">Leiser</td>
          ...

CSS

.error {
    background-color:#E8E8E8;
    border:1px;
    border-color:silver;
    border-style:solid;
    color:#FF1616;
    cursor:pointer;
}
.ok {
    background-color:#E8E8E8;
    border:1px;
    border-color:silver;
    border-style:solid;
    color:#1b7001;
    cursor:pointer;
}
.warn {
    background-color:#E8E8E8;
    border:1px;
    border-color:silver;
    border-style:solid;
    color:#FF9700;
    cursor:pointer;
}
tdRowspan {
    padding:0px 40px 0px 10px;
    font-size:17pt;
}

JavaScript

$(function () {

    $('#topo1,#topo2').sortable({
        itmes:'.sortable',
        dropOnEmpty: true,
        connectWith:'.connected',
        update:function(event,ui){
            var itmes = $(".topo").sortable('toArray');
            alert(itmes);
        },
    });

});