У меня есть список задач, которые я отображаю в элементе таблицы:

<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>

Я чередую имя действия и примечания к действию в каждой строке таблицы. Когда страница загружается, я скрываю все details_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>

Движение строки имени действия становится неровным, оно не знает, куда поместить себя, другие строки не смещаются правильно и т. Д.

Как я могу исправить это поведение? Я хочу, чтобы система сделала вид, что строки с примечаниями к действию по существу не существуют, несмотря на то, что там может быть много текста.