Question

我创建了一个基本的jQuery脚本，允许拖放表行重新排序。一切都很好 - 我唯一想知道的是如何在拖动时创建行的“鬼”图像。

我尝试克隆行

$(this).clone().addClass('dragClone');

使用以下CSS

.dragClone{opacity:0.4;position:absolute;z-index:1500;}

但没有出现。确定TR可能需要存在于表中，我克隆了整个表，清空行并附加选定的TR，如下所示：

$('.dragTable').clone().addClass('dragClone');$('.dragClone').find('tbody').empty().append($('.origZone'));

（origZone是被拖动TR的类）

仍然没有出现。

我以前从未使用克隆，所以我不知道我是否接近，或者说是在正确的轨道上！目标是创建一个类似于Redips_drag插件中使用的鬼影像（http://www.redips.net/javascript/drag-and-drop-table-row/）

Answer 1

通过执行以下操作，我能够解决此问题：

在页面上创建一个空div：

if($('#dragContain').length<1){$('body').append('<div id="dragContain"style="width:96%;height:1px"></div>');}

将包含的表保存到变量中，克隆它，删除tbody内容并隐藏thead，附加行，保存为变量，将其附加到前面提到的div

$table=$(this).closest('.dragTable');$row=$(this).closest('tr').clone();

$table.find('tbody').remove();$table.find('thead').hide();$table.append($row);$('#dragContain').addClass('dragClone').append($table);

我不确定这是否是实现它的最佳方法，但它确实有效。

仅供参考 - 我必须使用以下CSS来允许悬停影响对基础行起作用

#dragContain{pointer-events:none;}

希望这有助于某人！

如何在拖动时创建表格行的“鬼”图像

1 个答案: