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');

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');

• javascript
• jquery

• 1 Possible duplicates: stackoverflow./q/2458817/900747, stackoverflow./q/623703/900747, stackoverflow./q/5552083/900747 – A.M.K Commented Sep 30, 2012 at 22:29
• 1 jqueryui./demos/draggable/#option-helper – j08691 Commented Sep 30, 2012 at 22:32

1 Answer 1

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

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