Jquery sortable plugin makes row length smaller while dragging

Question

I am using jquery sortable plugin to sort the rows of table.

It is working fine but the problem is i have e,g table row length = 500px.

but while i am dragging the row , the row looks only 200px.

Is there any way so that while dragging as well the row length remains same

The html of table is

<tbody id="sortme" class="ui-sortable" style="">

    <tr id="scheduleRow_delSchedule_50" style="" class="">
        <td style="cursor: auto;">Collect money</td>
        <td id="schedulecat_50" class="scheduleEdit" style="">330 </td>
        <td class="delete"><a class="delSchedule" id="delSchedule_50" href="#"></a></td>
    </tr>
    <tr id="scheduleRow_delSchedule_49" style="" class="">
        <td style="cursor: auto;">tret4rterterte</td>
        <td id="schedulecat_49" class="scheduleEdit" style="">55 </td>
        <td class="delete"><a class="delSchedule" id="delSchedule_49" href="#"></a></td>
    </tr>
    <tr id="scheduleRow_delSchedule_48" style="" class="">
        <td style="cursor: auto;">Collect bag from shop</td>
        <td id="schedulecat_48" class="scheduleEdit" style="">55 </td>
        <td class="delete"><a class="delSchedule" id="delSchedule_48" href="#"></a></td>
    </tr>

</tbody>     

​

This is the jquery code

$j("#sortme").sortable({
    accept: 'sortitem',
    axis: 'y',
    cursor: 'move'
});


$j("a#update_order").click(function () {
    serial = $j('#sortme').sortable('serialize', {
        key: 'menu[]',
        expression: /^(.*) $/
    });


    $j.ajax({
        url: "sortdata.php",
        type: "post",
        data: serial,

        success: function () {
            setTimeout(function () {
                alert("Your Schedule is resorted");
                $j('#animation').hide();
            }, 3000);
        },

        error: function () {
            alert("theres an error with AJAX");
        }

    });


    $j('#animation').ajaxStart(function () {

        //   $j(this).show();
        //  $j('chklight').animate({opacity: 0.5}, 15000).fadeOut();
        //.fadeOut('slow');
        //   $j("body").animate({opacity: 0.2}, 7000);

    }).ajaxStop(function ()

    {
        //   $j(this).animate({opacity: 1}, 2000).hide();
    });



    return false;
});

Answer 1

You can look for the answer in this entry: http://stackoverflow.com/questions/1307705/jquery-ui-sortable-with-table-and-tr-width