使用JQuery的嵌套可排序功能

问题描述

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

Index.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');
        }
    });

输出

当我拖动饼形图时，左侧的工具箱也将拖动，我希望只有饼形图是可拖动的，当我将饼形图放在顶部时，则将饼图放在顶部将自动放置在饼图的位置。并且请不要改变图表的高度

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）