jQuery UI - Draggable Helper Clone

Question

Thank you in advance for taking a look at this!

My Goal:

• Upon dragging and dropping an object to the art canvas, an original (or copy) of the object must remain in the "Tool Bar" at the top so that user may use it repeatedly.

• Once the dragged object is dropped onto the art canvas, I need it to remain draggable throughout the canvas if the user decides he/she wants to move it

What is happening:

• (complete) The object is being cloned as expected and dropped onto the canvas
• The object is no longer draggable along the canvas once dropped. I'm trying to figure out how to keep it draggable once dropped.

The clone option was the only way I was able create a new instance of the a draggable object, perhaps I'm thinking in the wrong direction.

I am creating a clone as such:

$(".objectDrag").draggable({
    helper:'clone'
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_smiley = $(ui.helper).clone();
        $(this).append(new_smiley );
    }
});

Here is a JSFiddle for a visual of what is occurring: http://jsfiddle.net/YRfVd/55/

Please let me know if I am being unclear in anyway or could provide further explanation. Again, thank you so much for taking the time to look at this--you guys are awesome!

Nathan

Answer 1

You can initialize drag functionality on clone by draggable() function and remove class objectDrag so that newly added objects do not start to create their own clones.

$(".objectDrag").draggable({
    helper:'clone'
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_signature = $(ui.helper).clone().removeClass('objectDrag');
        new_signature.draggable();
        $(this).append(new_signature);
    }
});

JSFiddle: http://jsfiddle.net/YRfVd/56/