JQuery UI - Drag and Drop Key

Question

Thank you in advance for this!

My goal:

• When dragging an object into an art canvas, the original (or copy) of the object must remain in the "toolbar" at the top so that the user can reuse it.

• When an object is dragged onto an art canvas, I need it to remain dragged across the entire canvas if the user decides that he wants to move it.

What's happening:

• (full) The object is cloned as expected and lowered onto the canvas
• The object is no longer dragged along the canvas after it is deleted. I am trying to figure out how to keep it draggable after deletion.

The clone option was the only way I was able to create a new instance of the drag and drop object, maybe I'm thinking in the wrong direction.

I create 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 );
    }
});

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

, , . , , , - , , !

Answer 1

draggable() objectDrag, .

$(".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/