I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code:
$(function() {
$( ".draggable img").draggable({
revert: "invalid",
appendTo: "#droppable",
helper: "clone"
});
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
var image = $(".ui-draggable");
$( "<img />" ).image.src.appendTo( this );
}
});
});
Please see the demonstration here: jsFiddle example
From the example you see that the image drops in the div area only the first time. But I want the user to have the ability to drag and drop the same image as many times as they want in the targeted area.
So for example a user can drag and drop the image 5 times and there will be 5 images cloned in the targeted area. How can I do that?