HTML5 draggable rows between Datatables example

HTML5 draggable rows between Datatables example

kthorngrenkthorngren Posts: 20,089Questions: 26Answers: 4,721
edited December 2018 in DataTables 1.10

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

Replies

  • colincolin Posts: 15,103Questions: 1Answers: 2,582

    Hi Kevin,

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

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,089Questions: 26Answers: 4,721

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

    Kevin

  • kthorngrenkthorngren Posts: 20,089Questions: 26Answers: 4,721

    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

  • Jonvil123Jonvil123 Posts: 34Questions: 0Answers: 0

    hi kevin @kthorngren

    many thanks for the help :smile:

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

    thank you so much for always helping :smile:

  • allanallan Posts: 61,322Questions: 1Answers: 10,023 Site admin

    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

  • nelsonguerreironelsonguerreiro Posts: 2Questions: 0Answers: 0
    edited August 2019

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

  • kthorngrenkthorngren Posts: 20,089Questions: 26Answers: 4,721

    @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

  • nelsonguerreironelsonguerreiro Posts: 2Questions: 0Answers: 0

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

  • OSFOSF Posts: 18Questions: 0Answers: 0
    edited December 2020

    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

  • kthorngrenkthorngren Posts: 20,089Questions: 26Answers: 4,721
    edited December 2020

    @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

  • OSFOSF Posts: 18Questions: 0Answers: 0

    @kthorngren

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

    Greets Christian

This discussion has been closed.