jQuery Forum

I am following the droppable tutorial that demonstrates drag and drop between the List box and a trash can.

I want to mimic that functionality to drag and drop rows between two tables

There are some examples on the internet but they either don't work or have very convoluted code

I wrote the following jQuery - which works to a degree

    <script type="text/javascript">

        $(function () {

            $("#sourceTable tr:gt(0)").draggable({

                revert: 'invalid'

            });

            $("#destinationTable").droppable({

                drop: function (event, ui) {

         $("#destinationTable").append(ui.draggable);

                }

            });

        });

    </script>

The problem(s) are that the original table does not remove the TR and the ui.draggable is appended WAY at the bottom of the destination table.  When I change the .append to this:

$("#destinationTable").append(ui.droppable);

The original table does not remove the TR and the ui.droppable is appended in a haphazard way to the destination table

When I add a fadeout method like this:

ui.draggable.fadeOut();

Works on the source table – but also removes the TR on the destination table. 

I then added a clone method and it seemed to work

ui.draggable.clone().appendTo("#destinationTable");

Except I am back with problem #1 – the TR shows up too far down in the table.

Anyone have any ideas?