jquery ui draggable convert tr into div

Question

我有一个包含许多行的大表，每个行都有一个拖动处理程序。

我会使用哪个事件以便修改HTML并将<tr>更改为<div>？

Answer 1

您想要一个自定义助手。请参阅此问题：Custom helper for jQuery UI Draggable

基本上，您希望将内容包装在div而不是tr中。这样做的结果是，您现在td作为div的孩子而不会飞！所以你可以做两件事之一：

1. 您可以删除行中的内容甚至特定字段（我发布的SO问题就是这样做 - 只拖动某些元素来拖动）
2. 你可以，而不是在表格元素中加入tr 换行 tr，使拖拽事件成为一个有效的独立DOM片段，即一个完整的表格，即＆＃39;被拖了。

编辑：根据您的评论，做一些您将单元格1转换为h1而将单元格2转换为p的内容，您可以执行以下操作：

$('selector').draggable({
  helper: function()
  {
    var $ret = $("<div></div>");
    $ret.append( '<h1>' + $(this).find('td:nth-child(1)').text() + '</h1>');
    $ret.append( '<p>' + $(this).find('td:nth-child(2)').text() + '</p>');
    // ...

    return $ret;
  }

});