2014-10-28 153 views
0

相互疊放我有通過jquery-ui標記爲sortable兩個列表。每個列表包含標記爲draggable一個list item拖動項目的排序

enter image description here

正常使用情況下,我在其中拖放在一個相對正常速度的項目(請注意...正常是一個模糊的描述,但我想不出一個更好的),項目將拖動並沒有任何問題的下降,從一個列表到另一個或得到重新安排自己的名單中:

enter image description here

但是,如果我迅速拖從列表中刪除項目到另一個或內部他們自己的名單,他們傾向於堆疊在一起,而看到最底層的唯一方法就是嘗試移動頂部。即使這樣,有時我無法找到所有失蹤(可能是底部的項目),甚至試圖左右拖動想必頂的項目和重新排列後:

enter image description here

這裏的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/

回答

-1

非常奇特的錯誤。我看着控制檯,看是否有異常如雨後春筍般冒出,發現在一段時間這一個彈出一次,而拖動項目零星:

Uncaught TypeError: Cannot read property '0' of null 
jquery-ui.js:5679$.widget._clear 
jquery-ui.js:5679(anonymous function) 
jquery-ui.js:415$.widget._mouseStop 
jquery-ui.js:4946(anonymous function) 
jquery-ui.js:415(anonymous function) 
jquery-ui.js:2403jQuery.extend.each 
jquery.js:657$.ui.plugin.add.drag 
jquery-ui.js:2304$.ui.plugin.call 
jquery-ui.js:304$.widget._trigger 
jquery-ui.js:2218(anonymous function) 
jquery-ui.js:415$.widget._mouseDrag 
jquery-ui.js:1799(anonymous function) 
jquery-ui.js:415$.widget._mouseMove 
jquery-ui.js:992(anonymous function) 
jquery-ui.js:415_mouseMoveDelegate 
jquery-ui.js:955jQuery.event.dispatch 
jquery.js:5095elemData.handle 

我刪除從sortablerevert: "invalid"和錯誤走了。現在一切正常,沒有任何明顯的缺陷。

編輯:

我猜jQuery UI的文檔有一個簡單的方法來完成我的嘗試:http://jqueryui.com/sortable/#connect-lists