这个想法非常简单，而且几乎可行。有两个表，用户可以选择在两个表之间拖动行。当一行从 table1 拖到 table2 时，使用 ajax 来更新数据库，从 table1 中删除数据，添加到 table2，并使用新数据重新显示两个表。如果将信息从 table2 拖到 table1，同样的事情会起作用。
您可以查看代码示例 here .
以下是其中一个表的 Javascript 代码的摘录:
var startTable = "table1";
var $tabs=$("#" + startTable);
$( "tbody.connectedSortable")
.sortable({
connectWith: ".connectedSortable",
items: "> tr:not(:first)",
appendTo: $tabs,
helper:"clone",
cursor:"move",
zIndex: 999990
})
.disableSelection()
;
$($tabs).droppable({
accept: ".connectedSortable tr",
hoverClass: "ui-state-hover",
drop:function(event, ui){
var start= ui.draggable.attr("id");
var desTable = $(this).attr("id");
if(start != desTable){
alert("The ajax should be called");
}
return false;
}
});
除了一种情况外，它工作得很好。如果将一行从 Table1 拖到 Table2，它会创建一个槽以显示放开该行时该行将被插入的位置。换句话说，如果用户将一行从 Table1 拖到 Table2 的最后一个元素，它会创建一个开放的占位符(在 Table2 的最后一行下方)来描述放开时该行将去向的位置。这有一个问题。如果占位符已创建，但该行随后被拖到表格外并松开，该行仍会转到占位符，但永远不会调用 draggable 属性。
我希望发生的情况是，如果创建了一个占位符，无论该行放在哪里，它都会转到占位符并调用与其放入的表相对应的可放置代码。如果不存在占位符，该行应该返回到它被拖动的位置，并且什么都不会发生。
我尝试过的每个在两个表之间拖动行的示例都存在相同的问题。即使该行被删除到表外，你们有什么方法可以调用可删除代码吗？或者也许有更好的方法来调用 ajax 而不是当行被放到表上时？任何见解将不胜感激。
最佳答案
要在行从一个表删除到另一个表时触发 ajax 请求，您可以使用 receive sortable 的事件小部件。
This event is triggered when an item from a connected sortable list has been dropped into another list. The latter is the event target.
(强调我的)
Updated Fiddle (部分结果，请参阅下面的最终演示片段)
在接收回调中，您可以使用 item 访问删除的行第二个参数的属性 ( ui.item )。
如果触发receive事件回调，则表示ui.item已添加到 this表 ( $(this).closest("table.mytable") ) 并从另一个表 ( $("table.mytable").not($(this).closest("table.mytable")) ) 中删除。然后，您可以相应地触发 ajax 请求。
通过这种方式，您不必手动检查删除是否发生在同一个表中(如果您按照某人的建议使用 update 事件，则必须这样做).
目前，您不必要地初始化 sortable 两次:
$( "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+
关于javascript - 在表之间拖动行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27048496/