我正在尝试制作一个排序界面，其中有两种不同类型的组。每种类型可以有无限数量的组，每个组可以有无限数量的项目。无论哪种类型，您都应该能够在所有组之间移动项目。
我已经设置了界面，以便组显示为完全用 CSS 制作的树形菜单，如下所示：http ://www.thecssninja.com/css/css-tree-menu
当我将一个项目拖到其容器外时，它会消失在另一个容器后面。我尝试在 jQuery 中使用 helper: "clone" 选项，并尝试在项目上设置更高的 z-index，但它不起作用。
此外，每当我抓住并放下一个项目时，即使它位于其原始位置，然后折叠该组，丢弃的项目也会出现在组名称的顶部。我猜它不再被正确地识别为该组的孩子或类似的东西。
如果您将项目放在折叠的组中，也会发生同样的情况。
有没有人可以解决这些问题？
http://jsfiddle.net/Kantana/ya63V/8/
长长的代码列表如下。
Javascript（仅适用于单个组类型）：
$(document).ready(function () {
$('.sortable').sortable({
connectWith: $('.sortable'),
helper: "clone"
}).disableSelection();
});
HTML：
<div class="groupbox" id="groupbox_reports">
<div class="groupbox_heading">Groups</div>
<div class="groupbox_wrapper">
<ol class="tree">
<li class="group">
<label for="group1">Group 1: 2013-03-09</label>
<input type="checkbox" id="group1" />
<ol class="sortable">
<li class="file" id="item_1"><a href="">Report 1</a>
</li>
<li class="file" id="item_3"><a href="">Report 3</a>
</li>
<li class="file" id="item_6"><a href="">Report 6</a>
</li>
</ol>
</li>
<li class="group">
<label for="group2">Group 2: 2013-03-10</label>
<input type="checkbox" id="group2" />
<ol class="sortable">
<li class="file" id="item_2"><a href="">Report 2</a>
</li>
<li class="file" id="item_5"><a href="">Report 5</a>
</li>
<li class="file" id="item_7"><a href="">Report 7</a>
</li>
</ol>
</li>
<li class="group">
<label for="group3">Group 3: 2013-03-11</label>
<input type="checkbox" id="group3" />
<ol class="sortable">
<li class="file" id="item_8"><a href="">Report 8</a>
</li>
<li class="file" id="item_9"><a href="">Report 9</a>
</li>
<li class="file" id="item_10"><a href="">Report 10</a>
</li>
</ol>
</li>
</ol>
</div>
<div class="groupbox_menu"> </div>
</div>
<div class="groupbox" id="groupbox_incidents">
<div class="groupbox_heading">Incidents</div>
<div class="groupbox_wrapper">
<ol class="tree">
<li class="group">
<label for="incident1">Incident 1: 2013-03-12</label>
<input type="checkbox" id="incident1" />
<ol class="sortable">
<li class="file" id="item_11"><a href="">Report 11</a>
</li>
<li class="file" id="item_12"><a href="">Report 12</a>
</li>
<li class="file" id="item_13"><a href="">Report 13</a>
</li>
</ol>
</li>
<li class="group">
<label for="incident2">Incident 2: 2013-03-13</label>
<input type="checkbox" id="incident2" />
<ol class="sortable">
<li class="file" id="item_14"><a href="">Report 14</a>
</li>
<li class="file" id="item_15"><a href="">Report 15</a>
</li>
<li class="file" id="item_16"><a href="">Report 16</a>
</li>
</ol>
</li>
<li class="group">
<label for="incident3">Incident 3: 2013-03-14</label>
<input type="checkbox" id="incident3" />
<ol class="sortable">
<li class="file" id="item_17"><a href="">Report 17</a>
</li>
<li class="file" id="item_18"><a href="">Report 18</a>
</li>
<li class="file" id="item_19"><a href="">Report 19</a>
</li>
</ol>
</li>
</ol>
</div>
<div class="groupbox_menu"> </div>
</div>
CSS：
/* CSS Tree menu styles */
ol.tree {
padding: 0;
width: 100%;
margin-top: 4px;
}
li {
position: relative;
list-style: none;
margin-bottom: 2px;
padding: 3px;
}
li.group {
border: 1px dashed;
}
li.file {
margin-left: -1px !important;
}
li.file a {
background: url(../img/document.png) 0 0 no-repeat;
color: #000000;
padding-left: 21px;
text-decoration: none;
display: block;
}
li input {
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol {
background: url(../img/toggle-small-expand.png) 40px 0 no-repeat;
margin: -18px 0 0 -23px;
/* 15px */
height: 1em;
}
li input + ol > li {
display: none;
margin-left: -14px !important;
padding-left: 1px;
}
li label {
cursor: pointer;
padding-left: 37px;
}
li input:checked + ol {
background: url(../img/toggle-small.png) 40px 5px no-repeat;
margin: -23px 0 0 -23px;
/* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li {
display: block;
margin: 0 0 0.125em;
/* 2px */
}
li input:checked + ol > li:last-child {
margin: 0 0 0.063em;
/* 1px */
}
/** group box **/
#groupbox {
margin: 50px auto 0;
}
.groupbox {
position: relative;
display: inline;
float: left;
height: 500px;
overflow-y: auto;
}
.groupbox_wrapper {
padding: 10px;
overflow: hidden;
}
.groupbox_heading {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
position: relative;
top: 0;
width: 100%;
border-bottom: 2px solid #939393;
padding: 10px;
font-weight: bold;
}
#groupbox_reports {
width: 25%;
border-left: 2px solid #939393;
border-top: 2px solid #939393;
border-right: 2px solid #939393;
}
#groupbox_incidents {
width: 25%;
border-top: 2px solid #939393;
border-right: 2px solid #939393;
}
#groupbox_details {
width: 49%;
border-top: 2px solid #939393;
border-right: 2px solid #939393;
}
.groupbox_menu {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: #939393;
}