我有一个条件表代码，一个条件：表结构是这样的：
<table id="uisortable" data-section="inline" class="table ui-sortable" width="100%" border="0">
<tbody>
<tr id="item-8258">
<td width="3%">1</td>
</tr>
<tr id="item-8261">
<td width="3%">2</td>
</tr>
<tr id="item-8260">
<td width="3%">3</td>
</tr>
<tr id="item-8264">
<td width="3%">4</td>
</tr>
<tr id="item-8262">
<td width="3%">5</td>
</tr>
<tr id="item-8266">
<td width="3%">6</td>
</tr>
<tr id="item-8263">
<td width="3%">7</td>
</tr>
<tr id="item-8267">
<td width="3%">8</td>
</tr>
<tr id="item-8265" style="background-color:#CCC;">
<td width="3%">9</td>
</tr>
<tr id="item-8268">
<td width="3%">10</td>
</tr>
<tr id="item-8259">
<td width="3%">11</td>
</tr>
<tr id="item-8269">
<td width="3%">12</td>
</tr>
<tr id="item-8270">
<td width="3%">13</td>
</tr>
<tr id="item-8271">
<td width="3%">14</td>
</tr>
<tr id="item-8272">
<td width="3%">15</td>
</tr>
<tr id="item-8273">
<td width="3%">16</td>
</tr>
<tr id="item-8274">
<td width="3%">17</td>
</tr>
</tbody>
</table>
在另一个条件下，结构如下：
<table id="uisortable" data-section="table" class="table ui-sortable" width="100%" border="0">
<tbody>
<tr id="item-8535" class="parent sortable-row ui-state-default" data-question-id="1128">
<td width="3%">2</td>
</tr>
<tr id="item-8536" class="childrow ui-state-default" data-answer-id="1128">
<td width="3%">4</td>
</tr>
<tr id="item-8531" class="childrow ui-state-default" data-answer-id="1129">
<td width="3%">6</td>
</tr>
<tr id="item-8534" class="childrow ui-state-default" data-answer-id="1129">
<td width="3%">8</td>
</tr>
<tr id="item-8527" class="childrow ui-state-default" data-answer-id="1125">
<td width="3%">9</td>
</tr>
<tr id="item-8530" class="parent sortable-row ui-state-default" data-question-id="1125">
<td width="3%">10</td>
</tr>
<tr id="item-8532" class="childrow ui-state-default" data-answer-id="1125">
<td width="3%">11</td>
</tr>
<tr id="item-8537" class="childrow ui-state-default" data-answer-id="1125">
<td width="3%">12</td>
</tr>
<tr id="item-8528" class="parent sortable-row ui-state-default" data-question-id="388">
<td width="3%">13</td>
</tr>
<tr id="item-8523" class="parent sortable-row ui-state-default" data-question-id="225">
<td width="3%">14</td>
</tr>
<tr id="item-8533" class="parent sortable-row ui-state-default" data-question-id="1127">
<td width="3%">15</td>
</tr>
</tbody>
</table>
现在，我正在使用jquery UI可排序插件进行排序，第一个工作正常，因为它没有任何父子关系，第二个，它弄乱了一切，
我正在尝试将父母与孩子一起代替另一位父母，并重新使用它，可丢弃的父母可以有孩子，而不能有孩子，
孩子只能在父母内部移动
代码已经存在，但是无法正常工作，我肯定缺少一些东西，这是我的代码
var $tableToReorder = $("#uisortable");
var isTable = $tableToReorder.data('section');
if (isTable == 'inline') {
var items = 'tr';
var handle = false;
var forceHelperSize = false;
} else {
var items = 'tr';
var handle = '.childrow';
var forceHelperSize = true;
}
var sortableHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
function SortingStared() {
$('#uisortable').sortable({
containment: "document",
items: items,
opacity: '.5',
axis: "y",
helper: sortableHelper,
tolerance: 'pointer',
handle: handle,
forceHelperSize: forceHelperSize,
placeholder: "ui-state-highlight",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
notice("Sort Order Updating, Please wait...", "info");
},
update: function(e, ui) {
if (isTable == 'inline') {
$.post('sort.php', order, function() {
alert("done");
});
} else {
var tableHasUnsortableRows = $(this).find('> tbody > tr:not(.sortable-row)').length;
$(this).find('> tbody > tr.sortable-row').each(function(idx, row) {
/* If we are reordering a table with some fixed rows, make sure the fixed rows
* always follow their corresponding sortable row so they always appear together. */
if (tableHasUnsortableRows) {
var uniqID = $(this).attr('data-question-id'),
correspondingFixedRow = $('tr:not(.sortable-row)[data-answer-id=' + uniqID + ']');
correspondingFixedRow.detach().insertAfter($(this));
}
});
info = $(this).serialize();
$.ajax({
url: 'sort.php',
type: 'POST',
data: info,
async: false,
dataType: 'json',
success: function(data) {
alert("done");
}
});
}
},
activate: function(event, ui) {
for (var i = $('.ui-state-default').length - 1; i >= 0; i--) {
$('.pull-left:eq(' + i + ')').html(i + 1);
}
}
}).disableSelection();
}
我正在使用
handle: handle,
forceHelperSize: forceHelperSize,
但是我不确定它是否可以工作，添加了它并且它不会拖动
我粘贴的小提琴在这里
它在某种程度上起作用，但这是我从表结构创建的