jQuery sortable element remains in a dragging state

I’m creating an application which requires elements to be dragged from one list to another. Currently everything works fine, occasionally when I drag an element it drops into position but remains in a dragging state:

<ul class="task-bucket ui-sortable" id="backlog-tasks">
    <li class="task ui-draggable ui-draggable-dragging ui-sortable-helper" style="width: 150px; height: 100px; position: absolute; display: list-item; top: auto; left: auto; ">
      <header><h1></h1></header>
    </li>
    <li class="task">
        <header><h1></h1></header>
    </li>
</ul>

As the element is in a dragging state it is being displayed absolutely, and overlaps current list items as show here: http://i.imgur.com/n0Erh.png. There are three list items, but the incorrect li element overlaps the first li element.

Question

How can I prevent this element from occasionally remaining in this state?

Snippet of Current Code:

http://jsfiddle.net/RD5M6/3/

newest questions tagged jquery – Stack Overflow

About Admin