Question

我有两个标记为sortable到jquery-ui的列表。每个列表都包含list item，标记为draggable：

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/

Answer 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

我从revert: "invalid"删除了sortable，错误就消失了。现在一切正常，没有任何明显的缺陷。

修改

我想jQuery UI文档可以更轻松地完成我尝试的操作：http://jqueryui.com/sortable/#connect-lists

可拖动项目在可排序的堆叠中叠加在一起

1 个答案: