如何使 Jquery sortable 插件在 table 中使用多行进行拖动

Question

我有一个代表按钮的 table。每个 Button 都有三个属性。为了表示这种结构，我使用 table ，其中第一行是按钮的名称，然后按钮的三个属性在接下来的三行中。现在我想让用户重新排序按钮。为此，我正在使用 JQUERY Sortable 插件。它使 tbody sortable 并且我可以拖放单独的行。

我想要的是，用户应该能够将四行拖到一个组中，而不是拖放单独的行（按钮的名称+属性）如何实现。

我的开头是这样的table

<table class="table table-bordered table-striped table-highlight"
    id="tab_logic">
    <tbody></tbody>
   </table>

我以这种方式追加行

function loadTable(num) {
   $('#tab_logic').empty();
   
   for (var i=1 ;i<=num;i++)   {  
   $('#tab_logic').append("<div class = 'editrow'>");
   $('#tab_logic').append("<tr class='321'><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "+i+" Properties</strong></p></td></tr>");
   $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"+i+"' name ='addiac"+i+"' placeholder='Enter Action'</td> </tr>");
   $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"+i+"' name ='addiat"+i+"' placeholder='Enter Action Text'</td> </tr>");
   $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"+i+"' name ='addicc"+i+"' placeholder='Enter Color Code'</td> </tr>");
   $('#tab_logic').append("</div>");
   
   }
   
  }

我希望循环中的行运行是 sortable 作为一个而不是单独的按照建议进一步使用 jQuery UI sortable 函数

$("#tab_logic").sortable({
    items: "div",
        helper: "clone"
    }).disableSelection();

但它没有按要求工作。我也尝试了其他可能的项目属性组合，但它们也没有用。

Answer 1

你好看看http://api.jqueryui.com/sortable/#option-items

您可以将每 4 行包装在 tbody 标签中，并且可以将 sortable 项设置为 tbody。

//initialization 
$( ".table" ).sortable();
// Setter
$( ".table" ).sortable( "option", "items", ".sort-able-tbody" );

请检查此代码笔。 http://codepen.io/shahidbasheer/pen/WxRgOe

更新：您不能在 div 标签中包装 table 行，因为它不是有效的 html。参考 I need to wrap up table row into div

如何使 Jquery sortable 插件在 table 中使用多行进行拖动

How to make Jquery sortable plugin use more than one row in a table for dragging

javascript

jquery

jquery-ui

jquery-ui-sortable