jquery - Accordion 中的 Accordion ；如何使可排序只拖动数据而不是 Accordion 本身

Question

我有两个可以相互交换数据的列表。我的列表之一是 Accordion 列表，您可以在其中放置数据，但也包含更多特定的 Accordion ，这些 Accordion 也允许在其中放置数据。我可以在表之间拖放数据，甚至可以在 Accordion 内部的 Accordion 内拖放数据，但问题是:我也可以拖放整个 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(它包含动态创建 Accordion 的逻辑):

<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 使用不同的分隔符/类，以便按照我希望的方式进行这项工作，但我陷入了困境找到一种方法使事情仍然保持接近相同的格式，同时按预期使用 Accordion 。

Answer 1

睡了个好觉，仔细看了代码，终于解决了。原来这个类在这里:“.ui-widget-content”一直是问题所在。

通过将它用于我的 jquery 函数连接，我实际上将任何 Accordion 中的所有内容都作为可排序的，这就是为什么即使我使用多个 div 类来分隔元素，我也会遇到很多“错误”和“故障”。

在我的第二个列表中，我更改了我的 div 类

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

到

<div id="codigosAgrupadores>

并更改了 jquery 函数中的代码以反射(reflect)更改。