HTML5 draggable rows between Datatables example

HTML5 draggable rows between Datatables example

kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233
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: 4,693Questions: 0Answers: 823

    Hi Kevin,

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

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233

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

    Kevin

  • kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233

    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: 49,501Questions: 1Answers: 7,286 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

Sign In or Register to comment.