Clone draggable after dropping in targeted area with jQuery UI

Question

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?

Jean-Paul · Accepted Answer · 2017-05-29T13:41:18.757

3

You were almost there. You need the helper: "clone" attribute indeed. The best way to do this is to create a new clone when the drop event fires using .clone(). Then just initialise it and you're done:

$(function() {
    $(".draggable img").draggable({ 
        revert: "invalid",
        helper: "clone" 
    });   
    $("#droppable").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            var newClone = $(ui.helper).clone();
            $(this).after(newClone);
        }
    });
});

DEMO

_{As a comment: I highly recommmend the method I described above as it is better to make the clone in the drop event of the droppable then to bind a dragstop event to the draggable. This because otherwise too many clones will be made: my code ensures that no redundant clones are produced. To see what I mean, open this jsFiddle (which uses the wrong method: cloning on dragstop) and try dropping the draggable outside of the designated area. What happens is that redundant clones will be added to the DOM. This is both inefficient and ugly and should be avoided.}

edited May 29 '17 at 13:41

answered Jul 04 '15 at 09:24

Jean-Paul

19,910
9
62
88

1

that was a tremendous help. thnk you – Saifullah Alam Jul 04 '15 at 11:09
1

Can you also look here? http://stackoverflow.com/questions/31221603/remove-cloned-image-after-adding-another-image-with-jquery-ui – Saifullah Alam Jul 04 '15 at 14:17
@SaifullahAlam Of course: I've just submitted an answer. – Jean-Paul Jul 04 '15 at 15:10
Dragging an existing soccer ball also duplicates that object – Carl K Jul 05 '15 at 13:55
@CarlK: Thank you for pointing that out. I've improved my code now. – Jean-Paul Jul 05 '15 at 14:17

Clone draggable after dropping in targeted area with jQuery UI

1 Answers1

DEMO

Linked