在 jQuery 中拖动表格行答案

【问题标题】：Drag Table Rows in jQuery在 jQuery 中拖动表格行
【发布时间】：2016-12-22 15:47:20
【问题描述】：

使用 jQuery（和 UI），我希望能够将表格行拖出表格并将它们放在某个元素上。行本身不应离开表格，类似于拖动多首选定歌曲时 iTunes 的工作方式。我需要使用表格，因为这是表格数据，并且我已经有一个表格排序插件。

知道如何实现吗？

【问题讨论】：

有 jQuery 插件可以实现这一点。见isocra.com/2008/02/table-drag-and-drop-jquery-plugin
我知道这是一篇旧帖子，但 tnd 表插件在带有 thead 和 tbody 的表中不起作用，想要忽略标题行。有几个人写了分支版本。在您链接的 tnd 的 cmets 中链接的一个版本实际上适用于适当格式的表格。唯一的缺点是它禁用了我所有的下拉菜单。如果您的桌子上没有控件，那么分支版本 http://riouxsvn.com/svn/jquery-tablednd/trunk/ 实际上似乎运行良好。该项目现在也在 GitHub 上 https://github.com/isocra/TableDnD/ 但它也不是最新的。

【解决方案1】：

JQuery UI 的 droppable() 允许您定义一个函数，以便在可接受的 draggable() 拖放到该 droppable() 时运行。 this page 上的演示帮助我理解了如何编写代码。通过单击“查看源代码”查看他们的代码。尤其是这部分：

$gallery.droppable({
  accept: '#trash li',
  activeClass: 'custom-state-active',
  drop: function(ev, ui) {
    recycleImage(ui.draggable);
  }
});

例如，您应该能够创建一个删除函数来克隆您想要的行，但不能将其从其原始位置删除。

【讨论】：

【解决方案2】：

试试这个插件，用纯 Javascript 编写，能够拖动和排序行和列。 https://sindu12jun.github.io/table-dragger/

【讨论】：