I would appreciate if someone can help me out,

here's my code :

`https://jsfiddle.net/m796a3ud/`

What I want to do is drag an image from these list of Images and be able to get a clone that's draggable, and when I put it inside the box it counts how many images are inside, it works good for the most part but when I try to drag the cloned image in and out of the box a couple of times the clone gets cloned it self which is not what I want, I would really appreciate the help!

thanks.

CodePudding user response：

You have to call ui.helper.remove(); on the out event, try this:

$(function() {
    // document.addEventListener('mousemove', function(event) {
    //     console.log($(':hover').hasClass('draggable'))
    // })
    var n = 0;
    $( ".draggable" ).draggable({helper: 'clone'});
        
    $( ".wrong" ).draggable();

    $( "#droppable" ).droppable({    
        accept: ".draggable",
        drop: function( event, ui) {
            console.log(ui.draggable)
            
            console.log($(':hover').hasClass('draggable'))
            var new_signature = $(ui.helper).clone().removeClass('draggable');
            new_signature.draggable();
            $(this).append(new_signature);
           
            if($(new_signature).hasClass("ui-draggable") && !$(new_signature).hasClass("dropped")){
          
                 $(new_signature).addClass("dropped draggable")
                n  ;
        $(".count").text("There are "   n   " divs inside parent box detail.");
      

            } 
        },
        out: function(event, ui) {

            ui.helper.remove();

            if($(ui.draggable).hasClass("draggable") && $(ui.draggable).hasClass("dropped")) {
                $(ui.draggable).removeClass("dropped")
                console.log(ui.helper)
            }
            if( n > 0) {
                n--
            }
            $(".count").text("There are "   n   " divs inside parent box detail.");
            
        }
        
    });
});