user1048676 user1048676 - 1 year ago 91
jQuery Question

Drag a specific row into a new table with jQuery Sortable

I am trying to drag a specific row from one table into another table. I see the demo using LI and UL but I'm trying to do it with a table object. I created a JS fiddle to have my two different tables.

I tried different variations:

$( "#selected-stock-grid, #stock-grid" ).sortable({
connectWith: ".table-stock-content"
}).disableSelection();

$( "#selected-stock-grid, #stock-grid" ).sortable({
connectWith: ".table-stock-content tbody"
}).disableSelection();

$( "#selected-stock-grid, #stock-grid" ).sortable({
connectWith: ".table-stock-content tbody tr"
}).disableSelection();


Here is a JS fiddle:
https://jsfiddle.net/3f0u86gL/

It only tries to move the whole table instead of an individual row.

Answer Source

You need to be more specific on your selectors, use the tbody element instead the whole table:

From the API

Note: In order to sort table rows, the tbody must be made sortable, not the table.

$(function() {
  $( "#selected-stock-grid tbody, #stock-grid tbody" ).sortable({
    connectWith: ".table-stock-content tbody"
  }).disableSelection();
});

Updated Demo