Search code examples
javascriptjqueryjquery-uirazor-pages

Nested sortable functionality using JQuery

I want to add the sortable functionality only to the charts.

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 enter image description here

When i drag the pie chart the the tool box which is on left side is also dragging, i want that only pie chart should be dragable, and when i put the pie chart on the top then the chart which is on the top will be automatically placed on the place of pie chart. And please height of the charts will not be changes

Solution

  • You can use the sortable function of the of the jquery

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