0
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/