1

我创建了一个基本的 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/ )中使用的幽灵图像

4

1 回答 1

0

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

在页面上创建一个空 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;}

希望这对某人有帮助！

于 2012-11-09T07:33:23.000 回答