【发布时间】：2014-10-28 02:54:27
【问题描述】：
我有两个列表标记为sortable 到jquery-ui。每个列表都包含一个标记为draggable 的list item：
在正常使用情况下，我以相对正常的速度拖放这些项目（请注意......正常是一个模糊的描述，但我想不出更好的描述），项目被拖放而没有从一个列表到另一个列表的任何问题或在他们自己的列表中重新排列：
但是，如果我将项目从列表快速拖放到另一个列表或在它们自己的列表中，它们往往会堆叠在一起，而查看底部的唯一方法是尝试移动顶部的。即使这样，有时我也根本找不到丢失的（可能是底部的项目），即使在尝试拖动可能是顶部的项目并重新排列它们之后：
这是HTML：
<div id="available-group" class="noselect">
<h1 class="group-header ui-widget-header">Group 1</h1>
<ul class="sortable">
<li class="draggable ui-state-default">Item 6</li>
<li class="draggable ui-state-default">Item 7</li>
<li class="draggable ui-state-default">Item 8</li>
<li class="draggable ui-state-default">Item 9</li>
<li class="draggable ui-state-default">Item 10</li>
</ul>
</div>
<div id="selected-group" class="noselect">
<h1 class="group-header ui-widget-header">Group 2</h1>
<ul class="sortable">
<li class="draggable ui-state-default">Item 1</li>
<li class="draggable ui-state-default">Item 2</li>
<li class="draggable ui-state-default">Item 3</li>
<li class="draggable ui-state-default">Item 4</li>
<li class="draggable ui-state-default">Item 5</li>
</ul>
</div>
CSS:
.sortable {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0;
border: 1px solid black;
min-height: 40px;
}
.sortable>li {
margin: 1px;
padding: 5px;
}
#available-group, #selected-group {
width: 170px;
user-select: none;
margin: 10px 150px 10px 0px;
min-height: 300px;
float: left;
}
JavaScript:
$(".sortable").sortable({
revert: "invalid"
});
$(".draggable").draggable({
connectToSortable: ".sortable",
revert: "invalid"
});
我这几天一直在尝试解决这个问题，但似乎无法确定问题所在。如何停止由快速拖放引起的重叠“错误”？
编辑：
这里是 JSFiddle：http://jsfiddle.net/xBB5x/6123/
【问题讨论】：
标签： jquery jquery-ui jquery-ui-draggable jquery-ui-sortable