jquery - Accordion 内的 Accordion ；如何使排序仅拖拽数据而不是 Accordion 本身

我有两个列表，可以在它们之间交换数据。我的列表之一是手风琴的列表，您可以在其中放置数据，但还包含更具体的手风琴，这些手风琴还允许在其中放置数据。我可以在表之间甚至在手风琴内部的手风琴中拖放数据，但这是问题所在：我也可以拖动整个手风琴。

这是我页面的图片：



我希望能够在手风琴内的项目之间进行排序，而不必包括它们包含的子手风琴。这是我的Jquery函数：

<script>
    $(function () {
        $("#catalog").accordion({ collapsible: true, active: false, autoHeight: false });
        $(".subcatalog").accordion({ collapsible: true, active: false, autoHeight: false });

        $(".SpecificCatalog").sortable({
            connectWith: ".ui-widget-content, .GeneralCatalog", helper: "clone",
            appendTo: "body",
            stop: function (event, ui) {
                //console.log((this).sortable('toArray', { attribute: 'value' }));
                console.log(ui.item);
                console.log(ui.item.text());
            }
        });
        $(".ui-widget-content").sortable({
            connectWith: ".SpecificCatalog, .GeneralCatalog", helper: "clone",
            appendTo: "body",
            stop: function (event, ui) {
                //console.log((this).sortable('toArray', { attribute: 'value' }));
                console.log(ui.item);
                console.log(ui.item.text());
            }
        });
        $(".GeneralCatalog").sortable({
            connectWith: ".SpecificCatalog, .ui-widget-content", helper: "clone",
            appendTo: "body",
            stop: function (event, ui) {
                //console.log((this).sortable('toArray', { attribute: 'value' }));
                console.log(ui.item);
                console.log(ui.item.text());
            }
        });
    });
</script>

这是我的HTML（它包含动态创建手风琴的逻辑）：

<div id="content">
    <div id="ListaCodigos">
        <h2 class="ui-widget-header">CodigoAgrupador</h2>
        <div id="products">
            <div id="catalog">
                @foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
                {
                    if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
                    {
                        <h3><a href="#">@c.CodigoAgrupador  -  @c.NombreCuenta</a></h3>
                        <div>
                            <div class="subcatalog">
                                @foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
                                {
                                    if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
                                    {
                                        <h4><a href="#">@c2.CodigoAgrupador  -  @c2.NombreCuenta</a></h4>
                                        <div>
                                            <div class="SpecificCatalog">
                                                <ol>
                                                    <li class="placeholder">Add your items here</li>
                                                </ol>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                            <div class="GeneralCatalog">
                                <ol>
                                    <li class="placeholder">Add your items here</li>
                                </ol>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
    <div id="cart">
        <h2 class="ui-widget-header">Catalogos</h2>
        <div class="ui-widget-content">
            @foreach (LedgerChartOfAccounts c in Model.Catalogos)
            {
                if (c.CodigoAgrupador == null)
                {
                    <ul>
                        <li class="draggable">@c.GLAccountNumber  - @c.GLAccountName  </li>
                    </ul>
                }
            }
        </div>
    </div>
    <div>
        <footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
    </div>
</div>

我已经尝试在包含不同ID的容器中添加更多划分，以便指定某些区域可排序，但是我似乎仍然无法正确处理。欢迎任何帮助。

编辑：我得出的结论是，我需要在div中使用不同的分隔符/类，以便按我希望的方式进行此工作，但我一直在寻找一种使事情仍然保持接近的方法相同的格式，同时又可以按手风琴的预期进行操作。

最佳答案

经过一夜安眠并仔细阅读了代码，我终于解决了它。原来是这个类：“。ui-widget-content”一直是问题所在。

通过将其用于我的jquery函数连接，实际上我将所有手风琴中的所有内容都归为可排序对象，这就是为什么即使使用多个div类来分隔元素，我仍然会有很多“ bug”和“ glitches”的原因。

在第二个列表中，我将div类从

  <div id="ui-widget-content">

至

<div id="codigosAgrupadores>

并更改了jquery函数中的代码以反映更改。