Question

我有两个可以在自己之间交换数据的列表。我的一个列表是手风琴列表，您可以在其中放置数据的空间，但也包含更多特定的手风琴，这些手风琴也允许在其中删除数据。我能够在表格之间拖放数据，甚至在手风琴里面的手风琴中拖放数据，但问题是：我也可以拖动整个手风琴。

这是我的页面图片：

Buggy sortable

我希望能够在手风琴内的物品之间进行排序，而不包括它们包含的子手风琴。这是我的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使用不同的分隔符/类，以便按照我希望的方式进行此工作，但我陷入了困境找到一种让事情仍然接近相同格式的方法，同时与手风琴一起工作。

Answer 1

我终于在睡了个好觉并仔细查看代码后解决了这个问题。事实证明这个课程在这里：＆＃34; .ui-widget-content＆＃34;一直是个问题。

通过将它用于我的jquery函数连接，我实际上将任何手风琴中的所有内容都包括在内，这就是为什么我有很多错误＆＃34;和＆＃34;故障＆＃34;即使我使用多个div类来分隔元素。

在我的第二个列表中，我从

更改了我的div类

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

到

<div id="codigosAgrupadores>

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

手风琴中的手风琴;如何进行排序只拖动数据而不是手风琴本身

1 个答案: