jQueryUI Sortable bug

Sortable doesn't remove helper when Draggable drag is aborted

by kmbro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css">
<!--
1. CORRECT "SORTABLE" BEHAVIOUR - drag-n-drop the red, green and blue boxes to
   re-order them in the container - this should work perfectly
2. CORRECT "DRAGGABLE" BEHAVIOUR - drag the pink box over the top container and a gap
   will open up between two RGB boxes, or between a box and the edge of the container.
   Drop the pink box in a gap and it will join the other boxes in the container.
3. MORE CORRECT "SORTABLE" BEHAVIOUR - drag-n-drop the red, green and blue boxes again to
   re-order them in the container - this should work perfectly.  Do NOT drag the pink box.
4. STILL MORE CORRECT "SORTABLE" BEHAVIOUR - now drag the pink box to re-order it within
   the top container.  This should work perfectly.
5. INCORRECT "SORTABLE" BEHAVIOUR - now drag the yellow box down outside its container,
   without going over the top container, and drop it.  The cloned box disappears, which is
   correct.  However, how drag the red, green and blue boxes down outside the top container
   and release the mouse button.  The original item reappears within the container but the
   cloned helper remains where you dropped it.  The same happens with the new pink box.
6. FIXING "SORTABLE" BEHAVIOUR - now drag the yellow box onto the top container and drop it.
   It joins the other boxes and drag-n-drop re-ordering starts working again.

From this behaviour it looks like some initialisation done by Draggable/Droppable to the "connectToSortable" element isn't being undone if the "drop" occurs outside it, leaving the
Sortable still expecting to receive a drop which never comes.

The problem only happens when the Sortable has the "helper:'clone'" option set.

NOTE:
a) The online API...

CSS

table {
  border: solid grey 2px;
  border-spacing: 2px;
  margin: 0.5em;
}

td {
  width: 100px;
  height: 75px;
  border: solid black 2px;
}

JavaScript

$('#sortable').sortable({
	helper: 'clone'
});

$('#draggable td').draggable({
  helper: 'clone',
  connectToSortable: '#sortable'
});