使用 JQuery 的嵌套可排序功能答案

【问题标题】：Nested sortable functionality using JQuery使用 JQuery 的嵌套可排序功能
【发布时间】：2020-12-05 14:26:39
【问题描述】：

我只想将可排序功能添加到图表中。

索引.cshmtml

   <div id="sortable" class="col-lg-9">
        <div class="col-lg-12 col-md-12 padding hidden" id=@($"chartNumber{Model.Charts[0].ChartOrder}")>
            <figure class="figure">
                <div id=@($"container{Model.Charts[0].ChartOrder}")></div>
            </figure>
        </div>

        <div class="col-lg-12 hidden" id="@($"chartNumber{Model.Charts[1].ChartOrder}")">
            <div>
                <div class="col-lg-4 col-md-4 Grid pull-left padding">
                    <div class="row">
                        <div style="border: 2px solid blue; height: 100px" class="col-lg-12">Tool box 1</div>
                        <div style="border: 2px solid blue; height: 100px" class="col-lg-12">Tool box 2</div>
                        <div style="border: 2px solid blue; height: 100px" class="col-lg-12">Tool box 3</div>
                        <div style="border: 2px solid blue; height: 100px" class="col-lg-12">Tool box 4</div>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 pull-right padding">
                    <figure class="figure">
                        <div id=@($"container{Model.Charts[1].ChartOrder}")></div>
                    </figure>
                </div>
            </div>
        </div>
   </div>

Javascript.js

    $("#sortable").sortable({
        items: '> div > div > div:not(.Grid)',
        containment: 'parent',
        cursor: 'move',
        scroll: false,
        update: function () {
            var data = $("#sortable").sortable('toArray');
        }
    });

输出

当我拖动饼图时，左侧的工具框也在拖动，我希望只有饼图可以拖动，当我将饼图放在顶部时，顶部的图表会自动放在饼图的地方。并且请不要改变图表的高度

【问题讨论】：

建议添加句柄以帮助用户了解可以排序的内容。您可能希望使用items 指定应排序的特定项目。这样你就可以嵌套 sortables 而不会排序太少或太多。
是的@Twisty 我使用 items 来指定应该排序的特定项目，但问题是当我尝试对图表的 cnage 订单进行排序时，Grid 的高度变得更糟，你能拜托吗给我一个示例代码

标签： javascript jquery jquery-ui razor-pages

【解决方案1】：

可以使用jquery的sortable函数

  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

【讨论】：