使用sortablejs 对分层数据排序_sortablejs 分组-CSDN博客

本文链接：https://blog.csdn.net/winson20102010/article/details/136936802

在项目中，需要对有层级关系的数据进行排序，如图

Item 1 可以在item 2 、item 3 、item 4 等之间进行拖拽，但是item 1.1 item 1.2 等只能在item 1 里面拖拽。拖拽的范围只能是该item 所在的层级里面拖拽，不能超出，也不能去其他层级。

代码如下：


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js中文网</title>
    <link rel="stylesheet" href="https://sortablejs.com/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css">
    <link rel="stylesheet" href="https://sortablejs.com/assets/css/Features-Clean.css">
</head>

<body>

    <div class="features-clean"></div>

    <div class="container">
      <div class="col">
        <div id="nested" class="row">

          <div id="nestedDemo" class="list-group col nested-sortable">
              <div class="list-group-item nested-1">Item 1
                  <div class="list-group nested-sortable" id="nested-1">
                    <div class="list-group-item nested-2">Item 1.1</div>
                    <div class="list-group-item nested-2">Item 1.2
                      <div class="list-group nested-sortable" id="nested-1-2">
                        <div class="list-group-item nested-3">Item 1.2.1</div>
                        <div class="list-group-item nested-3">Item 1.2.2</div>
                        <div class="list-group-item nested-3">Item 1.2.3</div>
                        <div class="list-group-item nested-3">Item 1.2.4</div>
                      </div>
                    </div>
                    <div class="list-group-item nested-2">Item 1.3</div>
                    <div class="list-group-item nested-2">Item 1.4</div>
                  </div>
              </div>
              <div class="list-group-item nested-1">Item 2</div>
              <div class="list-group-item nested-1">Item 3</div>
              <div class="list-group-item nested-1">Item 4
                <div class="list-group nested-sortable" id="nested-4">
                  <div class="list-group-item nested-2">Item 4.1</div>
                  <div class="list-group-item nested-2">Item 4.2</div>
                  <div class="list-group-item nested-2">Item 4.3</div>
                  <div class="list-group-item nested-2">Item 4.4</div>
                </div>
              </div>
              <div class="list-group-item nested-1">Item 5</div>
          </div>
        </div>
      </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
    <script src="https://sortablejs.com/assets/js/theme.js"></script>

    <script>

      new Sortable(document.querySelector('#nestedDemo'),{
        handle: '.list-group-item', // handle's class
        animation: 150
      });
      new Sortable(document.querySelector('#nested-1'),{
        handle: '.list-group-item', // handle's class
        animation: 150
      });
      new Sortable(document.querySelector('#nested-1-2'),{
        handle: '.list-group-item', // handle's class
        animation: 150
      });
      new Sortable(document.querySelector('#nested-4'),{
        handle: '.list-group-item', // handle's class
        animation: 150
      });

    </script>
    
</body>

</html>