Jquery ui Jquery UI可与表排序
考虑下图 在下图中，行被划分为几行的一部分。 我已经用表实现了jQueryUISortable，但是通过它，任何行都可以插入表中的任何位置 我想要的是，行只能在其特定部分内进行排序，例如，一个部分的行不应插入第2部分 所以我在寻找一些类似于跳转验证的东西，比如说，一行不能用特定的类跳转另一行，或者让我知道其他事情 下面是jquery的一段代码Jquery ui Jquery UI可与表排序,jquery-ui,jquery-ui-sortable,jquery-ui-draggable,Jquery Ui,Jquery Ui Sortable,Jquery Ui Draggable,考虑下图 在下图中，行被划分为几行的一部分。 我已经用表实现了jQueryUISortable，但是通过它，任何行都可以插入表中的任何位置 我想要的是，行只能在其特定部分内进行排序，例如，一个部分的行不应插入第2部分 所以我在寻找一些类似于跳转验证的东西，比如说，一行不能用特定的类跳转另一行，或者让我知道其他事情 下面是jquery的一段代码 $(function(){ $("#etemplate_table_id").sortable({ /*etemplate_
$(function(){
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items:".tbl_row_4", /*tbl_row_4 - class of rows in yellow color*/
cursor:"move"
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered tbl_style " id="etemplate_table_id">
<thead>
<tr class="tbl_row_head" "="">
<th>M</th>
<th>W</th>
<th>A</th>
<th>Detailed Description</th>
<th>R-Class</th>
<th>B-Class</th>
<th>E-Category</th>
<th>ML-Category</th>
<th>Labor Rate</th>
<th>QTY</th>
<th>UOM</th>
<th>Duration</th>
<th>Crew Size</th>
<th>Unit Mhrs.</th>
<th>Total Mhrs.</th>
<th>Phase</th>
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr class="tbl_row_1" id="H0111">
<td>01</td>
<td colspan="8" class="left_align">House # 109, Vienna Andre</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr class="tbl_row_2" id="01_01-tbl_row_2" name="W002">
<td>01.01</td>
<td colspan="8" class="left_align wbs_master_list_td">Head & Trauma Pt</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1066">
<td></td>
<td class="cell_grp_brown">01.01.03</td>
<td>1066</td>
<td class="no_wrap_class">Develop Tower Near Yellow East River</td>
<td>DATA1</td>
<td>OM_CL</td>
<td>110100</td>
<td>Contractor</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>LS</td>
<td class="duration_cell">9 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>2</td><td>0</td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1259">
<td></td>
<td class="cell_grp_brown">01.01.04</td>
<td>1259</td>
<td class="no_wrap_class">Install Marron Wire M001</td>
<td>PCC-1</td>
<td>ME_CL</td>
<td>130100</td>
<td>Testing & Commissioning</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>Days</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>3</td><td>0</td></tr><tr class="tbl_row_10" id="01_01-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Head & Trauma Pt</td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_02-tbl_row_2" name="W003">
<td>01.02</td>
<td colspan="8" class="left_align wbs_master_list_td">Base Alm 17 SO</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_10" id="01_02-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Base Alm 17 SO</td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_03-tbl_row_2" name="W004">
<td>01.03</td>
<td colspan="8" class="left_align wbs_master_list_td">Body Mixed & //le </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1000">
<td></td>
<td class="cell_grp_brown">01.02.01</td>
<td>1000</td>
<td class="no_wrap_class">Map of Blue carousel</td>
<td>CVENG</td>
<td>NON O & M</td>
<td>140100</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">1 day</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1001">
<td></td>
<td class="cell_grp_brown">01.02.02</td>
<td>1001</td>
<td class="no_wrap_class">Blue Tire Removal</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1002">
<td></td>
<td class="cell_grp_brown">01.02.03</td>
<td>1002</td>
<td class="no_wrap_class">Jet Blue Service A</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">3 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1003">
<td></td>
<td class="cell_grp_brown">01.02.04</td>
<td>1003</td>
<td class="no_wrap_class">Air Pressure Blue Pin</td>
<td>TRENG</td>
<td>Indirect</td>
<td>180100</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">4 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="12" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1004">
<td></td>
<td class="cell_grp_brown">01.02.05</td>
<td>1004</td>
<td class="no_wrap_class">Blue Tax Appraisal For Marty James</td>
<td>TRENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="122" type="text"></td></tr><tr class="tbl_row_10" id="01_03-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Body Mixed & //le </td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>$1634</td>
</tr>
</tbody>
</table>
</div>
经过测试，我看不出代码有什么大问题。我确实发现了一些HTML语法问题，您应该努力加以纠正。比如：
<tr class="tbl_row_head" "="">
.tbl\u row\u 4希望这有帮助。您是否有一段代码试图实现它？因为它确实让那些试图找到解决方案的人的生活变得轻松。我认为你的
项目选项设置不正确。请提供最小、完整且可验证的示例-@Twisty。很难提取最小的工作代码，因为它还包含许多其他内容，如果提供完整的代码，它将是一个非常大的块。就项目而言，我提供了类（.tbl_row_4），它应用于所有有黄色背景的行。至少需要查看表的html。@Twisty，修改了问题并更新了代码。我的代码也与小提琴中给出的代码相同。但我的问题是，一个部分的行不应该落在另一个部分。例如，头部下方的黄色行与外伤处的行之间不允许有身体下方的混合行。谢谢你强调这一点（你能解决这个问题吗？@Abhi没有时间回顾这个问题。
<tr class="tbl_row_head" "="">
$(function() {
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items: "* > .tbl_row_4",
/*tbl_row_4 - class of rows in yellow color*/
cursor: "move"
});
});