jquer UIでオブジェクトの移動範囲を制限する

いつもお世話になっております。

jquer UIを用いてファイルの管理ができるようなものを作成したいと思っております。
実際は動かすたびにajaxを行う予定なのですが、現状は見た目の動きのみの部分を作成しています。

矢印をそれぞれクリックで下記にようにリストが出現します

下記コードのように書きそれぞれの要素をファイル間をまたいで移動できるようにはなったのですが、下記画像のようにファイル1の上部また、ファイル2の範囲の外である最下部にもドラッグアンドドロップで移動できてしまいます。

これを制限し、必ず「内側2つのid="jquery-ui-sortable"の ul要素（ファイル1とファイル2の下のui要素）」の中だけに入るようにしたいのですが、どのようにすれば分からずこちらに質問させていただきました。
参考になるサイトでも構いませんのでご教示いただけますと幸いです。
よろしくお願いいたします。

html
1<head>
2    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
3    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
4    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
5
6     <style>
7        #jquery-ui-sortable {
8          list-style-type: none;
9          margin: 0;
10          padding: 0;
11          width: 350px;
12        }
13        #jquery-ui-sortable li {
14          margin: 0 3px 3px 3px;
15          padding: 0.3em;
16          padding-left: 1em;
17          font-size: 15px;
18          font-weight: bold;
19        }
20        #jquery-ui-sortable li span {
21          cursor: move;
22          position: absolute;
23          margin-top: 2px;
24          margin-left: 300px;
25        }
26
27        /* メニュー全体 */
28        .menu {
29          width: 20rem;
30        }
31
32        /* チェックボックス非表示 */
33        .menu input {
34          display: none;
35        }
36
37        .block {
38          display: block;
39        }
40        .none {
41          display: none;
42        }
43
44        /* 閉じた状態のサブメニュー */
45        .menu ul {
46          background: #eee;
47          list-style: none;
48          margin: 0;
49          padding: 1rem;
50        }
51
52        /* 親項目の装飾 */
53        .menu label {
54          display: inline-block;
55          margin: 0;
56          padding: 0.5rem;
57          background: #ddd;
58          cursor: pointer;
59        }
60
61        .menu label:hover {
62          background: #ccc;
63        }
64    </style>
65</head>
66
67<ul id="jquery-ui-sortable" class="menu">
68    <div>
69      <label for="item1">▶</label>
70      <input type="checkbox" id="item1" name="check">ファイル1
71    </div>
72    <ul id="jquery-ui-sortable" class="none">
73      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル1</li>
74      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル2</li>
75      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル3</li>
76    </ul>
77
78    <div>
79      <label for="item2">▶</label>
80      <input type="checkbox" id="item2" name="check">ファイル2
81    </div>
82    <ul id="jquery-ui-sortable" class="none">
83      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル4</li>
84      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル5</li>
85      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル6</li>
86      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s ui-corner-all ui-state-hover"></span>ファイル7</li>
87    </ul>
88  </ul>
89

javascript
1　　$(function () {
2      $('#jquery-ui-sortable').sortable({
3        handle: 'span',
4        cancel: '.stop'});
5      });
6
7    $(function(){
8      $('[name="check"]').change(function(){
9        if (!$(this).is(':checked')) {
10          $(this).parent().next().removeClass('block')
11          $(this).parent().next().addClass('none')
12        } else {
13          $(this).parent().next().addClass('block')
14          $(this).parent().next().removeClass('none')
15        }
16      });
17    });