我有一个可以使用jquery ui排序的html表。然后我添加了一个充当垃圾桶的桌子。出于美观原因,我只希望当用户拖动表格行时垃圾桶可见。我通过在活动事件上创建表行来执行此操作,并删除表行的deactivate事件。但是我注意到,当它被拖入垃圾箱时,它不再删除该项目。我试图通过使用settimeout来解决这个问题,以便在tablerow消失之前有一段延迟,但这不起作用。
我还想知道我可以修复它,以及如何使其下拉而不是立即弹出(Example),然后向上移动而不是消失(反向示例)。
我有JSfiddle setup here这里也是表格的html:
<table class="table" id="tableDevices">
<thead>
<tr>
<th>Name</th>
<th>Protocol</th>
<th>Systemcode</th>
<th>Unitcode</th>
<th>State</th>
<th></th>
</tr>
</thead>
<tbody class="ui-sortable">
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr style="display: table-row;"></tr>
<tr class="ui-sortable-handle" style="display: table-row;">
<td class="AllowEdit" contenteditable="true">BBQ</td>
<td class="AllowEdit" contenteditable="true">pollin</td>
<td class="AllowEdit" contenteditable="true">31</td>
<td class="AllowEdit" contenteditable="true">4</td>
<td class="AllowEdit" contenteditable="true">off</td>
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td></tr>
<tr class="ui-sortable-handle" style="display: table-row;">
<td class="AllowEdit" contenteditable="true">Server</td>
<td class="AllowEdit" contenteditable="true">pollin</td>
<td class="AllowEdit" contenteditable="true">15</td>
<td class="AllowEdit" contenteditable="true">1</td>
<td class="AllowEdit" contenteditable="true">off</td>
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td></tr>
<tr class="ui-sortable-handle" style="display: table-row;">
<td class="AllowEdit" contenteditable="true">Kitchen</td>
<td class="AllowEdit" contenteditable="true">pollin</td>
<td class="AllowEdit" contenteditable="true">31</td>
<td class="AllowEdit" contenteditable="true">1</td>
<td class="AllowEdit" contenteditable="true">off</td>
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
</tr>
<tr style="display: table-row;"></tr>
</tbody>
</table>
这是我正在运行的javascript
//Code to drag and drop order table
var fixHelperModified = function (e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("#tableDevices tbody").sortable({
activate: function (event, ui) {
$('#tableDevices > tbody > tr:first').before('<tr><td colspan="6" id="trash" class="trash">Trash</td></tr>');
}
}, {
deactivate: function (event, ui) {
setTimeout(function () {
$("#trash").remove();
}, 500);
}
}, {cancel: '[contenteditable]'}, {connectWith: '#trash'}, {helper: fixHelperModified});
$("#trash").droppable({
accept: "#tableDevices tr",
hoverClass: "ui-state-hover",
drop: function (ev, ui) {
ui.draggable.remove();
}
});
答案 0 :(得分:0)
不要重复创建和删除元素,只需隐藏并显示它。将行添加到表的HTML中,在页面加载时隐藏它,然后使用此
activate: function (event, ui) {
$('#trash').show();
}
和这个
deactivate: function (event, ui) {
$("#trash").hide();
}
答案 1 :(得分:0)
问题与我认为的事件触发有关。因为每次必须绑定事件时都会删除并添加元素。您可以通过仅添加内联元素来阻止这种情况,然后只需更改css属性。
<强> JSFiddle 强>
<强> JS 强>
$("#tableDevices tbody").sortable({
activate: function (event, ui) {
$('#trash').css('display', 'table-row');
}
}, {
deactivate: function (event, ui) {
$("#trash").css('display', 'none');
}
<强> CSS 强>
#trash {
display: none;
}
HTML (tbody的第一行)
<tr id="trash"><td colspan="6" class="trash">Trash</td></tr>