javascript – 在表之间拖动行
作者：互联网
这个想法非常简单,几乎可以运作.有两个表,用户可以选择在两个表之间拖动行.当一行从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属性.
我想要发生的是,如果创建了一个占位符,无论行放在何处,它都会转到占位符并调用与放入的表对应的可放置代码.如果没有地方-holder存在,该行应该返回到它被拖动的位置,并且不会发生任何事情.
我试过的每个例子在两个表之间拖动行都有同样的问题.你有没有办法调用droppable代码,即使行被丢弃在表外？或者也许有一种更好的方法来调用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(部分结果,请参阅以下片段进行最终演示)
在接收回调中,您可以使用第二个参数(ui.item)的item属性访问被删除的行.
如果触发了receive事件回调,则表示已将ui.item添加到此表($(this).closest(“table.mytable”))并从其他表中删除($(“table.mytable”). ($(本).closest( “table.mytable”))).然后,您可以相应地触发ajax请求.
通过这种方式,您不必手动检查是否在同一个表中发生了丢弃(如果您按照某人的建议使用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选项是“父”,只是从初始化中删除它将完成工作.
此外,最好从< tbody>移动标题行.进入< thead>元素,以便您可以避免指定项目：“> 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类
从jQuery UI 1.9中不推荐使用disableselection()方法
标签：jquery-ui-draggable,javascript,jquery-ui,jquery-ui-sortable,jquery-ui-droppable 来源： https://codeday.me/bug/20190725/1529305.html