如何在拖动时创建表格行的“幽灵”图像答案

【问题标题】：How to create 'ghost' image of table row on drag如何在拖动时创建表格行的“幽灵”图像
【发布时间】：2017-09-05 19:00:30
【问题描述】：

我创建了一个基本的 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/)

【问题讨论】：

您知道 JQueryUI (jqueryui.com) 对吗？它正是这样做的（当使用可拖动功能时）并且还允许对元素进行排序。除非您这样做是为了学习，否则可能比尝试重新发明轮子 IMO 更容易？ :)
这样做既是为了学习，也是为了节省内存。我的可拖动脚本只有 2kb 而不是加载完整的 JQueryUI 库！
很公平，但您可以使用他们的网站生成自定义 ui js 文件，该文件仅包含您真正想要的任何组件:)
除非您是 google.com 或运行效率至上的公司。不使用 jQueryUI 的原因不应该是大小，因为您可以选择性地选择要加载的库。通过 Google 的 CDN 加载它意味着您的用户可能已经从另一个网站缓存了它，并且 gzip 压缩后它只有 60k。仅加载可拖动的库，该库将轻松投放到青少年。
感谢@Nucleon 的信息。但是，我的拖动脚本的其余部分已经在工作了 - 我只想弄清楚如何使克隆工作。

标签： jquery drag-and-drop clone

【解决方案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;}

希望这对某人有所帮助！

【讨论】：