Dragging a row from one jquery Datatable and dropping it into another Datatable

问题

Iam trying to drag a row or a group of rows from one jquery Datatable and drop it into another Datatable .

oTable = $("#dragtable").dataTable({
    "aaData": app_emp,
    "bProcessing": true,
    "bDestroy": true,
    "aoColumns": [{
        "mDataProp": "employeeId"
    }, {
        "mDataProp": "empName"
    }]
}).rowReordering();

Iam getting the json from ajax call and populating the datatable as above.The row reordering feature is working and Iam able to drag and drop the rows in the same datatable

$("#dragtable ").draggable({
    helper: "clone",
});

Above code is dragging the entire table and if I modify it as below:

$("#dragtable tbody tr ").draggable({ helper: "clone", });

Its dragging only the header row of the Datatable and not the rows of data in the body.

I have the below code for dropping the rows into another jquery datatable.

$("#tobedroppedtable tbody tr").droppable({});

I need help on dragging and dropping as the above code is not working.

回答1:

Try this may be this can help but I am not sure

oTable // this is the varibale which you have used to initialize data table.

So I will use this variable.

$("oTable.fnGetNodes()").draggable({
     helper: "clone",  
});

I think the issue is, draggable is not applied to all the rows of your table. This is the reason why the entire table is being dragged when you try to drag a sinlge row. Try and see if that works for you.

First, this line:

$(oTable.fnGetNodes()).draggable({

Looks simple enough. This line adds the draggable functionality to all rows of the datatable. This was a key. If you use another selector, something like “#tableId tr” which you would think would work, you’ll be in trouble. That’s because if you change the data that is viewed in the table, i.e. by filtering, then the draggable functionality will be lost on the new rows that are shown. So, in order to apply it to ALL rows of the table, you must call the function supplied by the datatables plugin.

来源：https://stackoverflow.com/questions/25519187/dragging-a-row-from-one-jquery-datatable-and-dropping-it-into-another-datatable