Drag/Drop table Row 0.1

HTML

<div class="left"> 
    <h2>Cart</h2> 
    <div id="cart"> 
        <ul class="selected"> 
        </ul> 
    </div> 
</div>


<div class="right"> 
    <h2>Listing</h2> 
    <table class="listing"> 
        <thead> 
            <tr> 
                <th>id</th> 
                <th>name</th> 
                <th>date</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr id="classid-1"> 
                <td>1</td> 
                <td class="name">Class 1</td> 
                <td>8/7/2009</td> 
            </tr> 
            <tr id="classid-2"> 
                <td>2</td> 
                <td class="name">Class 2</td> 
                <td>8/7/2009</td> 
            </tr> 
            <tr id="classid-3"> 
                <td>3</td> 
                <td class="name">Class 3</td> 
                <td>8/7/2009</td> 
            </tr> 
            <tr id="classid-4"> 
                <td>4</td> 
                <td class="name">Class 4</td> 
                <td>8/7/2009</td> 
            </tr> 
            <tr id="classid-5"> 
                <td>5</td> 
                <td class="name">Class 5</td> 
                <td>8/7/2009</td> 
            </tr> 
            <tr id="classid-6"> 
                <td>6</td> 
                <td class="name">Class 6</td> 
                <td>8/7/2009</td> 
            </tr> 
        </tbody> 
    </table> 
</div>

CSS

.left{
    width: 200px;
    background: #c7defa;
    border: 2px solid #7da4fa;
    float: left;
    min-height: 400px;
}
.right{
    float: left;
    margin-left: 10px;
}
h2{
    margin: 5px 0 2px 0;
    font-size: 1.2em;
}
#cart{
    min-height: 150px;
    width: 190px;
    border: 1px solid black;
}
#cart.hover{
    border: 1px solid red;
}
table.listing,
.drag-cart-item table{
    width: 400px;
}
table.listing, table.listing td, table.listing th ,
.drag-cart-item table, .drag-cart-item td{
    border-collapse: collapse;
    border: 1px solid gray;
    padding: 5px;
}
table td.name{
    /*cursor: move;*/
}
table th{
    background:#E6E6E6;
}
.drag-cart-item{
    background: #FFF;
}

JavaScript

$(function() {
     
  var $srcTable = $('.listing');
     
  
  $srcTable
    .bind('mousedown', function() { $srcTable.disableSelection();})
    .bind('mouseup', function() { $srcTable.enableSelection();});
    
    $('tr',$srcTable)
       .draggable({
         helper: function(event) {
            var l = 
            $('<div class="drag-cart-item"><table></table></div>')
             .find('table')
             .append($(event.target).closest('tr').clone())
             .end()
             .insertAfter($srcTable);

             return l;
    },
    cursorAt: {
        left: -5,
        bottom: 5
    },
    cursor: 'move',
    distance: 10,
    delay: 100,
    scope: 'cart-item',
    revert: 'invalid'
    });

     
     
     
     $('#cart').droppable({
    scope: 'cart-item',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer',
    drop: function(event, ui) {
        var classid = ui.helper.find('tr').attr('id');
        var name = ui.helper.find('.name').html();
        $('#cart .selected').append('<li id="' + classid + '">' + name + '</li>');
    }
});
     
 });