Drag Table Rows in jQuery

Question

Using jQuery (and UI), I want to be able to drag table rows out of the table and drop them on some element. The rows themselves should not leave the table, similar to how iTunes works when dragging multiple selected songs. I need to use a table since this is tabular data and I already have a table sort plugin in place.

Any idea how to achieve this?

there are jQuery plugin to achieve this. See isocra.com/2008/02/table-drag-and-drop-jquery-plugin — mikeycgto
I know this is an old post but nontheless, the tnd table plugin doesn't work in a table with a thead and tbody, wanting to ignore the header row. Several people have written branched version. One version linked in the comments of the tnd you linked actually works with a propper formatted table. Only downside is it disables all my dropdowns. If you got no controls on your table, the branched version http://riouxsvn.com/svn/jquery-tablednd/trunk/ actually seems to work well. the project is now also on GitHub here https://github.com/isocra/TableDnD/ but its also not up-to-date. — Nope

Nathan Long Nathan Long · Accepted Answer · 2009-08-23T14:33:58

JQuery UI's droppable() lets you define a function to run whenever an acceptable draggable() is dropped onto that droppable(). The demo on this page was what helped me understand how to code it. Look at their code by clicking "View Source." Especially this part:

$gallery.droppable({
  accept: '#trash li',
  activeClass: 'custom-state-active',
  drop: function(ev, ui) {
    recycleImage(ui.draggable);
  }
});

You should be able to create a drop function to clone the row you want, for example, but not delete it from its original location.

Drag Table Rows in jQuery

2 Answers