HTML5 draggable rows between Datatables example

kthorngren

I put together this example of using the HTML5 drag and drop API to move rows between two Datatables. Its an interesting API and doesn't require additional JS libraries for drag and drop. It was a good learning experience to build this example. Hope it helps others how want to drag and drop between tables.

https://jsbin.com/venigaj/1/edit?html,css,js,output

Kevin

colin

Hi Kevin,

Nice, I'm sure that'll be useful for others!,

Cheers,

Colin

kthorngren

More fun with HTML5 drag and drop between cells in one table:
https://jsbin.com/bedivox/1/edit?html,js,output

Kevin

kthorngren

Updated the first example to drag selected rows between tables. It uses the Select Extension.

https://jsbin.com/rujigaq/1/edit?html,css,js,output

Select one or more rows. Drag and drop one of the selected rows to the other table. All the selected rows will be moved. If a non-selected row is dragged then only that row will be dropped on the other table. The selected rows remain where they are.

Kevin

Jonvil123

hi kevin @kthorngren

many thanks for the help

do you have sample also without the checkbox? if its okay

thank you so much for always helping

allan

Just remove the column definition for the checkbox column and the empty column in the HTML. This example which shows how to add the checkbox might be useful to reverse engineer how to remove it.

Allan

nelsonguerreiro

Hello thanks, very useful for me. Can we drag rows between two tables with the Editor?

kthorngren

@nelsonguerreiro,

I haven't tried it, but instead of using the Datatables API's row.add() and remove() in the handleDrop() function I would look at using the Editor API's create() and remove().

Kevin

nelsonguerreiro

Thanks a lot Kevin I'll try this, when I'll be good enough with javascrip and jQuery.

OSF

Hello,

i modify the above example.
My issue is, that this not work if a icon exist on row column.

Please try to move from top to bottom (or reverse), and looks like the icon. It will add multiple times for every drag&drop move:

https://jsbin.com/hisetoyefa/2/edit?html,css,js,output

kthorngren

@OSF

In the handleDrop() function the source row is fetched using this:

      // Get source transfer data
      var srcData = e.dataTransfer.getData('text/plain');

With a result that looks like this:

<tr draggable="true" role="row" class="odd" style="opacity: 0.4;"><td><i class="fa fa-info"><sup></sup></i></td><td class="sorting_1">Rhona Davidson</td><td>Integration Specialist</td></tr>

The columns.render function returns the icon with the content of the data in the first cell using this:

return '<i class="fa fa-info"><sup>'+full.a+'</sup></i>';

The first time dragging the first cell data ( full.a ) is <td><i class="fa fa-info"><sup></sup></i></td> so its imbedded into the icon being rendered. Using e.dataTransfer.getData('text/plain') is the documented way to move HTML elements. With Datatables a better way might be to get the original data from the source row. This can be done by adding this statement:

      // Get original data from source row for destination
      var data = $('#' + srcTable).DataTable().row(dragSrcRow).data()

See the updated example:
https://jsbin.com/zazebopihu/edit?js,output

Kevin

OSF

@kthorngren

Ahhaaa... Fantastic! Many thanks. That working very well!!

Greets Christian