jQuery UI regenerate (zombie) draggable elements

Question

Dear all, I'd like to know how to create draggable elements using jQuery UI that once they are dragged and dropped into another container, regenerate the same item. For example, I can drop a button from container A to container B, and once I do that, the same button (a clone) re-emerges in container A.

Thanks in advance.

Answer 1

Listen for the drop event with a custom function:

$('.selector').droppable({
   drop: function(event, ui) { ... }
});

When the item is dropped in the new container, insert a clone into the original container. You can make new elements using jQery:

var listItem = $("<li></li>");

References:

• UI docs
• jQuery core

Answer 2

The right way to go about this would be to go with an append or prepending a new element to an existing anchor.

var newElement = $("<div id='home'></div>").draggable( { snap: '.droppable', revert: 'invalid' } );
    $("#homearea").append(newElement);