使用 JQuery 的嵌套可排序功能

Question

我只想为图表添加可排序功能。

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

Output

当我拖动饼图时，左边的工具框也在拖动，我希望只有饼图可以拖动，当我把饼图放在最上面时，然后是打开的图表顶部将自动放置在饼图的位置。请图表的高度不会改变

Answer 1

您可以使用jquery

的sortable函数

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

使用 JQuery 的嵌套可排序功能

Nested sortable functionality using JQuery

javascript

jquery

jquery-ui

razor-pages