UnKnown UnKnown - 2 months ago 21
jQuery Question

How to drag and drop elements between two container

I have got two tables by name Table 1 and Table2 and each table consists of two rows.

I could able to drag and drop elements within the same table

Could you please tell me If is it possible to drag and drop Table rows from Table 1 to Table 2 and vice versa (Moving rows within different tables )

This is my HTML for the two tables

<h2>Table 1:</h2>
<div id="table1" >
<table>
<tbody>
<tr>
<td>Table 1 First Row</td>
</tr>
<tr>
<td>Table 1 Second Row</td>
</tr>
</tbody>
</table>
</div>
<hr/>
<h2>Table 2:</h2>
<div id="table2">
<table>
<tbody>
<tr>
<td>Table 2 First Row</td>
</tr>
<tr>
<td>Table 2 Second Row</td>
</tr>
</tbody>
</table>
</div>


and my js code

$("tbody").sortable({

});


This is my fiddle

https://jsfiddle.net/wdy1ty89/7/

Answer

From jQuery UI:

$("tbody").sortable({connectWith:"tbody"});

You should apply a min-width and height where the user can drag the element:

table{
  padding:5px 0; // To have a min height of 10px
  min-width:100px;
}

Check this Fiddle