Потеря выравнивания при <div> раскрытии клика

Question

У меня есть отдел следующим образом.

<div class="draggableParent">
    <div class="row" id="draggablePanelList">
        @if (Model.chartConfigDataList.Count > 0)
    {
        for (var i = 0; i < Model.chartConfigDataList.Count; i++)
        {
                <div class="col-md-4 col-sm-6 col-xs-12 mainCls" id="@ChartNameForResize">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2 id="Header_ChartName">
                                @obj.chartDetail.ChartName
                            </h2>
                            @*CHART SETTINGS MENU*@
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="printChart" title="Save Image"> <i class="glyphicon glyphicon-save"></i> </a> </li>
                                <li><a class="expand-link" title="Expand Chart" onclick="horizontalResize(@ChartNameForResize)"><i class="glyphicon glyphicon-resize-horizontal"></i></a></li>
                                @*<li><a class="TableView" title="View in Table" onclick="@LogChartname"> <i class="fa fa-table"></i> </a> </li>*@
                                <li><a class="chart-info-link" title="Chart Info"><i class="fa fa-info"></i></a></li>
                                <li><a class="collapse-link" title="Collapse"><i class="fa fa-chevron-up"></i></a></li>
                            </ul>
                        </div>
                        <div class="x_content">
                            <div>
                                @{ Html.RenderAction(@obj.ChartView, "DA_CPC", new { ChartType = @obj.ChartType });}
                            </div>
                        </div>
                    </div>
                    <input id="ChartID_Hidden" type="hidden" value="@obj.chartDetail.ChartID" data-parentId="@obj.chartDetail.ParentID" />
                </div>
        }
    }
    </div>
</div>

И мой код Jquery выглядит следующим образом:

jQuery(function ($) {
    var panelList2 = $('#draggablePanelList');

    panelList2.sortable({

        handle: '.x_title',
        opacity: 0.4,
        cursor: 'move',
       // scroll: false,
        containment: ".draggableParent",
        forceHelperSize: true,
        revert: 'true',
        update: function () {
            $('.mainCls', panelList2).each(function (index, elem) {
                var $listItem = $(elem),
                 newIndex = $listItem.index();
            });
        }
    });
});

Внутри моего div у меня есть ссылка на коллапс, как показано на рисунке ниже:

В приведенном выше выравнивание в порядке. Но когда я нажимаю кнопку расширения первой ссылки на график, все графики сдвигаются влево.

Но если я раскрою кнопку расширения последнего графика, она сместит все последующие графики ниже. Как я могу сделать свои первые 2 <div> кнопка расширения действует так же, как расширение 3-го <div>

Answer 1

Трудно предложить решение для вашей проблемы, потому что мы не можем увидеть визуализированный HTML. Но большинство проблем с jQuery-UI-Sortable происходит от CSS.

После звонка .sortable, divс класс (id="@ChartNameForResize") изменилось, и это создает некоторые проблемы. Вы можете проверить HTML-код в браузере и проверить class ваших элементов в этой ситуации и выяснить вашу проблему.