Agradecería si alguien me puede ayudar,
aquí está mi código:
`https://jsfiddle.net/m796a3ud/`Lo que quiero hacer es arrastrar una imagen de esta lista de imágenes y poder obtener un clon que se pueda arrastrar, y cuando lo coloco dentro del cuadro, cuenta cuántas imágenes hay dentro, funciona bien en su mayor parte, pero cuando intente arrastrar la imagen clonada dentro y fuera de la caja un par de veces, el clon se clona solo, lo cual no es lo que quiero, ¡realmente agradecería la ayuda!
Gracias.
Tienes que llamar a ui.helper.remove(); en el evento de salida, intente esto:
$(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."); } }); });