jquery - jquery ui可拖动将tr转换为div

Question

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

我将使用哪个事件来修改 HTML 并将其更改<tr>为<div>？

Answer 1

您需要一个自定义助手。看到这个 SO 问题：Custom helper for jQuery UI Draggable

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

1. 您可以只从行甚至特定字段中删除内容（我发布的 SO 问题就是这样做的 - 仅拉出某些元素进行拖动）
2. 您可以，而不是将 trtr 包装在 table 元素中，使拖动事件成为有效的独立 DOM 片段，即被拖动的完整表格。

编辑：根据您的评论，要执行将单元格 1 转换为 anh1并将单元格 2 转换为 a 的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;
  }

});