jquery draggable but leave copy where original element was

Question

Say I have 3 smiley faces, L, M and R at the top of a page. At the bottom, I have a destination box. Between them is a statement : "drag the Middle smiley to destination".

While draggable allows you to do that, it drags the actual element, not a copy. When the user drags a smiley face, I want the top 3 to remain stationary, with only a copy of the one theyre moving to actually move. The user should be able to drag multiple copies if needed into multiple destination boxes.

Basically, Im looking for something like this

$("#drag-target-1").draggable('leave-copy');

Answer 1

Use helper property with value clone to enable cloning of draggable element.

 $("#drag-target-1").draggable({helper : 'clone' });