sort in the same table and drop in different table

Question

I have two tables in my code. I want to sort the rows in with in same table and drag and drop in different table.

so I used both sortable and draggable, droppable functions. but only one is working ( depending on using id and classes).

I'm new here so I don't know how to give link so I'm pasting my code here in which only drag and drop is working not sorting.

here is my script part

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function () {
    var fixHelperModified = function (e, tr) {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function (index) {
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            },
            updateIndex = function (e, ui) {
                $('td.index', ui.item.parent()).each(function (i) {
                    $(this).html(i + 1);
                });
            };

    $(".grid tbody").sortable({
        helper: fixHelperModified,
        stop: updateIndex
    }).disableSelection();
});//]]>

</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $("#dragdrop tr, #dragdrop1 tr").draggable({
            helper: 'clone',
            revert: 'invalid',
            start: function (event, ui) {
                $(this).css('opacity', '.5');
            },
            stop: function (event, ui) {
                $(this).css('opacity', '1');
            }
        });

        $("#dragdrop, #dragdrop1").droppable({
            drop: function (event, ui) {
                $(ui.draggable).appendTo(this);
                //alert($(ui.draggable).text());
                //fire ajax here if needed
            }
        });
    });

</script>

here is my style table{border: brown 1px solid}

and head part

<h1>Table one</h1>

<table id="dragdrop" class="grid" title="Kurt Vonnegut novels">
<thead>
<tr>
    <th class="index">No.</th>
    <th>Year</th>
    <th>Title</th>
    <th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
    <td class="index">1</td>
    <td>1969</td>
    <td>Slaughterhouse-Five</td>
    <td>A+</td>
</tr>
<tr>
    <td class="index">2</td>
    <td>1952</td>
    <td>Player Piano</td>
    <td>B</td>
</tr>
<tr>
    <td class="index">3</td>
    <td>1963</td>
    <td>Cat's Cradle</td>
    <td>A+</td>
</tr>
<tr>
    <td class="index">4</td>
    <td>1973</td>
    <td>Breakfast of Champions</td>
    <td>C</td>
</tr>
<tr>
    <td class="index">5</td>
    <td>1965</td>
    <td>God Bless You, Mr. Rosewater</td>
    <td>A</td>
</tr>
</tbody>
</table>
<h1>Table two</h1>
<table id="dragdrop1" class="grid" title="Kurt Vonnegut novels">
<thead>
<tr>
    <th class="index">No.</th>
    <th>1Year</th>
    <th>1Title</th>
    <th>1Grade</th>
</tr>
</thead>
<tbody>
<tr>
    <td class="index">1</td>
    <td>11969</td>
    <td>1Slaughterhouse-Five</td>
    <td>1A+</td>
</tr>
<tr>
    <td class="index">2</td>
    <td>11952</td>
    <td>1Player Piano</td>
    <td>1B</td>
</tr>
<tr>
    <td class="index">3</td>
    <td>11963</td>
    <td>1Cat's Cradle</td>
    <td>1A+</td>
</tr>
<tr>
    <td class="index">4</td>
    <td>11973</td>
    <td>1Breakfast of Champions</td>
    <td>1C</td>
</tr>
<tr>
    <td class="index">5</td>
    <td>11965</td>
    <td>1God Bless You, Mr. Rosewater</td>
    <td>1A</td>
</tr>
</tbody>
</table>

Answer 1

Hey I did not get answer for this question completely. so I'm using jQuery List DragSort 0.5.1. It completly fulfills my requirement.