我有一个显示在表格元素中的待办事项列表：
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>{{ action.notes }}</td>
</tr>
{% endfor %}
</tbody>
</table>
我在表格每一行的动作名称和动作注释之间交替。当页面加载时，我隐藏了所有的 detail_rows，以便用户只能看到操作名称。如果用户单击名称行，我会显示该操作的注释行（使用切换）。
$(document).ready(function() {
$(".detailed_row").hide();
});
$(function($) {
$(".item_row").click(function() {
if( $(this).next().is(':hidden') ) {
$(".detailed_row").hide();
$(this).next().toggle('fast');
} else {
$(".detailed_row").hide();
}
});
});
我希望用户能够通过拖动操作名称行来对待办事项列表进行排序。我正在使用 jQuery 的可排序：
$(".sortable").sortable().disableSelection();
让我们暂时忽略动作音符行的移动。如果用户拖动一个注释行，或者在另一个名字和一个注释行之间放置一个名字行，它会弄乱切换逻辑。我已经通过在移动注释行时移动名称行来解决这个问题，反之亦然，这样对总是以正确的顺序排列。
我遇到的问题是注释行中注释的大小。如果注释只有几行，则排序行为表现得很好。但是，如果注释足够长，排序似乎效果不佳，即使注释已折叠。
例如，如果我将 {{ action.notes }} 替换为实际文本，则效果很好：
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>Test text data</td>
</tr>
{% endfor %}
</tbody>
</table>
但这不会：
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum imperdiet convallis. Nam ac nunc at magna pretium rhoncus eget ac neque. Nullam tempus feugiat euismod. Nunc posuere est consectetur nunc dignissim at faucibus mi convallis. Integer mattis nisi sit amet ante malesuada ut sagittis nulla congue. Pellentesque bibendum pulvinar mattis. Duis lorem libero, commodo hendrerit tincidunt quis, sodales eget nunc. Proin mauris mi, placerat quis pharetra eu, vestibulum vel mi. Vivamus luctus condimentum tortor ut accumsan. Fusce scelerisque, neque vel sollicitudin porta, ipsum lorem tempus mauris, et consequat nibh ipsum ut tortor. Aenean ut ante id justo pellentesque convallis. Etiam eu risus leo. Suspendisse potenti. Maecenas blandit, lectus sit amet suscipit viverra, enim velit bibendum nulla, sed aliquet arcu est quis justo. Sed sed est mi.
Morbi vel tortor iaculis sapien accumsan ullamcorper at id justo. Nulla facilisi. Nam adipiscing tellus a metus blandit quis vestibulum metus scelerisque. Nam risus tortor, pharetra vel condimentum lobortis, venenatis in tortor. Proin sit amet erat nulla, a dignissim lectus. Nullam dapibus ullamcorper justo, in imperdiet turpis egestas eget. Etiam dignissim faucibus ipsum. Nunc at diam risus, non rhoncus lectus. Praesent eget dolor vel ipsum blandit sagittis quis at ligula. Nunc euismod orci non felis scelerisque hendrerit. Quisque imperdiet lobortis erat, a tempus enim condimentum vitae. Proin rutrum ligula odio. Praesent nec magna lectus, quis congue augue. Nullam vestibulum tempus elit id sollicitudin. Nullam a nibh nisi, vitae tristique sem.
</td>
</tr>
{% endfor %}
</tbody>
</table>
动作名称行的移动变得不稳定，它不知道将自己放置在哪里，其他行没有正确移位，等等。
我该如何解决这种行为？我希望系统假装动作注释行基本上不存在，尽管那里可能有很多文本。