Drag table rows in jQuery

Using jQuery (and UI) I want to be able to drag tables out of the table and drop them onto some element. The rows themselves don't have to leave the table, similar to how iTunes works when dragging and dropping multiple selected songs. I need to use a table since it is tabular data and I already have a table sort plugin.

Any idea how to achieve this?

+2


source to share


2 answers


JQuery UI droppable () allows you to define a function to run whenever a valid draggable () falls on that droppable (). Demo this page helped me figure out how to code it. Look at your code by clicking View Source. Especially this detail:

$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 string you want, for example, but not remove it from its original location.

+2


source


Just try this plugin written in plain Javascript that is capable of dragging and dropping and sorting rows and columns. https://sindu12jun.github.io/table-dragger/



+1


source







All Articles