要在将行从一个表删除到另一个表时触发 ajax 请求，您可以使用 sortable 小部件的 receive 事件。
当已连接的可排序列表中的项目被放入另一个列表时触发此事件。后者是事件目标。
（强调我的）
Updated Fiddle（部分结果，最终演示请参见下面的 sn-p）
在接收回调中，您可以使用第二个参数 (ui.item) 的 item 属性访问已删除的行。
如果触发了接收事件回调，则表示ui.item已添加到this表（$(this).closest("table.mytable")）并从另一个表（$("table.mytable").not($(this).closest("table.mytable"))）中删除。然后，您可以相应地触发 ajax 请求。
通过这种方式，您不必手动检查 drop 是否发生在同一个表中（如果您按照某人的建议使用 update 事件，则必须这样做)。
目前，您不必要地使用以下命令初始化可排序两次：
$( "tbody.connectedSortable").sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
cursor:"move",
zIndex: 999990
})
和
$("tbody.connectedSortable").sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs2,
helper:"clone",
cursor:"move",
zIndex: 999990
});
选择器tbody.connectedSortable 适用于两个表，因此它会简单地覆盖先前的初始化，因此，克隆助手将始终附加到第二个表（$tabs2）。这可能不是您想要的 - 从外观上看，您初始化两次只是为了将克隆附加到相应的父级。 appendTo 选项的默认值为"parent"，只需将其从初始化中删除即可。
此外，将标题行从 <tbody> 移动到 <thead> 元素是一个好主意，这样您就可以避免指定 items: "> tr:not(:first)" ：因为 jQuery UI 没有如果未指定该选项，则不必搜索无效项目。
最后，您复制了无效的id。要对一组元素进行分组，请改用公共类。
$(document).ready(function() {
$("tbody.connectedSortable").sortable({
connectWith: ".connectedSortable",
helper: "clone",
cursor: "move",
zIndex: 99999,
receive: function(event, ui) {
/* here you can access the dragged row via ui.item
ui.item has been removed from the other table, and added to "this" table
*/
var addedTo = $(this).closest("table.mytable"),
removedFrom = $("table.mytable").not(addedTo);
alert("The ajax should be called for adding to " + addedTo.attr("id") + " and removing from " + removedFrom.attr("id"));
}
});
});
.mytable a:link,
.mytable a:visited {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.mytable a:active,
.mytable a:hover {
color: #bd5a35;
text-decoration: underline;
}
table.mytable {
width: 90%;
font-family: Arial, Helvetica, sans-serif;
color: #666;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background: #eaebec;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
.mytable th {
color: #fff;
padding: 21px 25px 22px 25px;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
background: #191970;
}
.mytable th:first-child {
text-align: center;
padding-left: 20px;
}
.mytable tr {
text-align: center;
padding-left: 20px;
}
.mytable tr td:first-child {
text-align: center;
padding-left: 20px;
border-left: 0;
}
.mytable tr td {
padding: 18px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
border-bottom: 0;
}
.mytable tr:last-child td:first-child {
-moz-border-radius-bottom-left: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
-moz-border-radius-bottom-right: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
background: #f2f2f2;
transform: scale(1.01);
padding-left: 20px;
outline: 1px solid #191970;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<table id='table1' class="mytable">
<thead>
<tr class="table1">
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr class="table1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="table1">
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</tbody>
</table>
<table id='table2' class="mytable">
<thead>
<tr class="table2">
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
</tr>
</thead>
<tbody class="connectedSortable">
<tr class="table2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="table2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
旁注：我已经组合了类似的 CSS 类
disableselection() 方法已从 jQuery UI 1.9+ 中弃用