draggable items stack on top of each other in a sortable

Question

I have two lists that are marked as sortable through jquery-ui. Each list contains a list item that is marked as draggable:

Under normal use, in which I drag and drop those items at a relatively normal speed (mind you... normal is a vague description, but I can't think of a better one), items get dragged and dropped without any issues from one list to another or get re-arranged within their own lists:

However, if I rapidly drag and drop items either from list to another or within their own list, they tend to stack on top of each other and the only way to see the bottom ones is to try to move the top ones. Even then, sometimes I can't find the missing (presumably-bottom items) at all, even after trying to drag the presumably-top items around and rearrange them:

Here's the 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>

The 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;
}

The JavaScript:

$(".sortable").sortable({
    revert: "invalid"
});

$(".draggable").draggable({
    connectToSortable: ".sortable",
    revert: "invalid"
});

I've been trying to solve this for a couple of days now and can't seem to pinpoint the problem. How can I stop the overlapping "bug" that is caused by the quick dragging/dropping?

EDIT:

Here's JSFiddle: http://jsfiddle.net/xBB5x/6123/

Answer 1

Very peculiar error. I looked at the console to see if any exceptions are popping up and noticed this one pop up once in a while while dragging items sporadically:

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

I removed revert: "invalid" from sortable and the error went away. Now everything functions properly, without any visible defects.

EDIT:

I guess jQuery UI documentation has an easier way to accomplish what I tried: http://jqueryui.com/sortable/#connect-lists