drag and drop contents from one table to another

[nadiam]

Hi guys so i have 2 tables in my page. One table would be populated by names from database and another remains empty for the moment. so what i want to be able to do in this page is that names can be dragged and dropped from the first table to the second table.

this in jsfiddle is an example of how the drag n drop would be coded but i was wondering how to make it work with database, like the "drop" would be like an insert into the database with id and all. is that possible? or is there an easy-enough jquery plugin of some sort that can make this work.

any suggestions/idea is very much appreciated!

[pritaeas]

how to make it work with database

On drop you can make an ajax call to update both tables.

[nadiam]

i decided to use drag and drop jquery ui instead. and thought of using a submit button instead of using the drop as the insert. but before i can even think of the database issue im facing another and hope maybe someone could share some knowledge.

I have two tables, one being populated by data and another empty. I am using draggable and droppable jquery ui so I can move data from the first table to the other. im using drag n drop jquery its working perfectly. Now, I am trying to clone the "tr" element of the second table where data is being copied when data is dropped using .clone() and the cloning works except it clones the data as well which i dont want i just want to clone the tr element.

this is the html.

<div id="contact-list">
<table class="contact-list-table">
    <thead>  
        <th>Name</th>
    </thead>
    <tbody>
        <tr id="1"><td>Nora Marzuki</td></tr>
        <tr id="2"><td>Tunku Imran</td></tr>
        <tr id="3"><td>Iman Nong</td></tr>
    </tbody>
  </table>
  </div>
    <div id="guest-list">
    <table class="guest-list-table">
    <thead>
        <th>Guest</th>
    </thead>
    <tbody>
        <form>
            <tr><td><input name="guest" readonly /></td></tr>
        </form>
    </tbody>
</table>
</div>

jquery

<script type="text/javascript">
$(document).ready(function(){
var c = {};
$("#contact-list tr").draggable({
        helper: "clone",
        start: function(event, ui) {
            c.tr = this;
            c.helper = ui.helper;
        }
});
$("#guest-list tr").droppable({
    drop: function(event, ui) {
        var guest = ui.draggable.text();
        var copy = $(this);
        $(this).find("input").val(guest);
        copy.closest('tr').clone(true).prependTo(copy.closest('.guest-list-table'));
        $(c.tr).remove();
        $(c.helper).remove();
    }
   });
  });
  </script>

This line is for the copying and it copies the data as well as the element:

var copy = $(this);
copy.closest('tr').clone(true).prependTo(copy.closest('.guest-list-table'));

so it tried:

var copy = $(this);
copy.clone(true).find(":input").val("").end().insertAfter(copy);

and it copies the element excluding the data but then when i try to drop a second data in the copied element i can't and this is where im stuck.

any help/ideas is much appreciated and if there is a different/better approach to what i want to do, suggestions are appreciated as well. thank you in advance.