在项目中，需要对有层级关系的数据进行排序，如图
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>