jQueryUI Draggable: Error with dynamically added element

I've slightly extended the jQueryUI example "Draggable + Sortable" ( http://jqueryui.com/demos/draggable/sortable.html ) to make it able to add draggable elements dynamic开发者_开发知识库ally. Live example can be found here: http://jsfiddle.net/MLSqa .

After click the Add button the new draggable item gracefully added to the #sortable list.

But. When try to move it by mouse (1st time) it suddenly jumps to the top-left corner. And only 2nd attempt to move it gets success.

How to fix such strange behavior? How to drag the newly added item correctly?

Check the update: http://jsfiddle.net/MLSqa/1/

You don't have to 'recreate' a draggable on the new item. Just add the new item to the already existing draggable.

I also removed the $ in front of the variable box. You can put this back if you want to.