Drag And Drop Your Tables Like Netflix
Re-ordering my Netflix queue to move one embarrassing movie below another is easy. The code that let the developers at the movie rental company implement that feature is difficult. At least, it used to be.
Drag-and-drop is a fancy feature touted by many JavaScript frameworks. With extremely little code, page elements can be made draggable. Unfortunately, tables require a little more work.
Luckily, someone else has done the work for us, which they describe in dragging and dropping rows in JavaScript. There’s a lot of code in there, but you can find the nitty gritty by scrolling down to the “putting it all together” section.
To make a table’s rows draggable, just create an instance of their TableDnD class, and pass it a reference to your table. Then, if you want to have your code respond to a dragged row, you’ll need to implement your own onDrop function.
If you’re using the popular JQuery framework, there’s a table drag-and-drop plugin that’s even easier to use.
See also:
