draggable items stack on top of each other in a sortable

draggable items stack on top of each other in a sortable

So, I'm not exactly sure if it's an intended behavior based on my code or if it's a bug within jquery-ui. I created two lists as sortable and each list item within those lists as draggable. Whenever I would drag and drop items rapidly, they would end up stacking on top of each other and creating empty spaces within the lists. It did not matter if I was doing dragging and dropping within the list or between the two, the same behavior would be produced.

Here's the code:

  1. <div id="available-group" class="noselect">
  2.       <h1 class="group-header ui-widget-header">Group 1</h1>
  3.       <ul class="sortable">
  4.             <li class="draggable ui-state-default">Item 6</li>
  5.             <li class="draggable ui-state-default">Item 7</li>
  6.             <li class="draggable ui-state-default">Item 8</li>
  7.             <li class="draggable ui-state-default">Item 9</li>
  8.             <li class="draggable ui-state-default">Item 10</li>
  9.       </ul>
  10. </div>

  12. <div id="selected-group" class="noselect">
  13.       <h1 class="group-header ui-widget-header">Group 2</h1>
  14.       <ul class="sortable">
  15.             <li class="draggable ui-state-default">Item 1</li>
  16.             <li class="draggable ui-state-default">Item 2</li>
  17.             <li class="draggable ui-state-default">Item 3</li>
  18.             <li class="draggable ui-state-default">Item 4</li>
  19.             <li class="draggable ui-state-default">Item 5</li>
  20.       </ul>
  21. </div>
  1. .sortable {
  2.       list-style-type: none;
  3.       margin: 0px 0px 10px 0px;
  4.       padding: 0;
  5.       border: 1px solid black;
  6.       min-height: 40px;
  7. }

  9. .sortable>li {
  10.       margin: 1px; 
  11.       padding: 5px; 
  12. }

  14. #available-group, #selected-group {
  15.       width: 170px;
  16.       user-select: none;
  17.       margin: 10px 150px 10px 0px;
  18.       min-height: 300px;
  19.       float: left;
  20. }

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

  5. $(".draggable").draggable({
  6.       connectToSortable: ".sortable",
  7.       revert: "invalid"
  8. });

The problem is described further in details (with images) in this SO post:
http://stackoverflow.com/questions/26600175/draggable-items-stack-on-top-of-each-other-in-a-sortable/26601096#26601096

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

After looking through the console log, I noticed the following exception appearing once in a while:

  1.     Uncaught TypeError: Cannot read property '0' of null
  2.     jquery-ui.js:5679$.widget._clear 
  3.     jquery-ui.js:5679(anonymous function)
  4.     jquery-ui.js:415$.widget._mouseStop 
  5.     jquery-ui.js:4946(anonymous function) 
  6.     jquery-ui.js:415(anonymous function)
  7.     jquery-ui.js:2403jQuery.extend.each 
  8.     jquery.js:657$.ui.plugin.add.drag
  9.     jquery-ui.js:2304$.ui.plugin.call 
  10.     jquery-ui.js:304$.widget._trigger
  11.     jquery-ui.js:2218(anonymous function)
  12.     jquery-ui.js:415$.widget._mouseDrag 
  13.     jquery-ui.js:1799(anonymous function) 
  14.     jquery-ui.js:415$.widget._mouseMove
  15.     jquery-ui.js:992(anonymous function)
  16.     jquery-ui.js:415_mouseMoveDelegate
  17.     jquery-ui.js:955jQuery.event.dispatch 
  18.     jquery.js:5095elemData.handle


After much contemplating and testing, I was able to fix it by removing revert: "invalid" from sortable:

  1. $(".sortable").sortable({
  2.       revert: "invalid"
  3. });
I'm not sure if it's a bug or intended behavior, but after removing that line, everything began functioning as intended.

P.S. I guess documentation has an either way to accomplish what I did:  http://jqueryui.com/sortable/#connect-lists