Как перетаскивать элементы между двумя контейнерами

Question

У меня есть две таблицы по названию Таблица 1 и Таблица2 и каждая таблица состоит из двух рядов.

я мог бы иметь возможность перетаскивать элементы в пределах одной и той же таблицы

Не могли бы вы сказать мне, если это возможно перетащить таблицы строки из таблицы 1 в таблице 2, и наоборот (перемещение строк в разных таблицах)

Это мой HTML для двух таблиц

<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> 

и мой код JS

$("tbody").sortable({ 

}); 

Это моя скрипка

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

Answer 1

От jQuery UI:

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

Вы должны применять мин ширину и высоту, где пользователь может перетащить элемент:

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

Проверить this Fiddle