user1048676 user1048676 - 5 months ago 34
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

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

Comments