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?

Answer 1

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.