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并找出问题所在。

在<div>上失去对齐方式展开点击

1 个答案: