如何使 Jquery 可排序插件在表格中使用多行进行拖动

Question

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

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

我一开始的桌子是这样的

<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>");
			
			}
			
		}

我希望循环中运行的行可以作为一个而不是单独排序 按照建议进一步使用像这样的jQuery UI可排序功能

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

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

Answer 1

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

您可以将每 4 行包装在 tbody 标记中，并且可以将可排序项目设置为 tbody。

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

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

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