我在使用 JqueryUI 时遇到的一个错误 draggable/droppable

Question

如果有人能帮助我，我将不胜感激，

这是我的代码：

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

我想做的是从这些图像列表中拖动一个图像并能够获得一个可拖动的克隆，当我把它放在盒子里时它会计算里面有多少图像，它对大多数情况下，但是当我尝试将克隆的图像拖入和拖出盒子几次时，克隆会自行克隆它，这不是我想要的，我真的很感激你的帮助！

谢谢。

Answer 1

你必须调用 ui.helper.remove();在 out 事件中，试试这个：

$(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.");
            
        }
        
    });
});

我在使用 JqueryUI 时遇到的一个错误 draggable/droppable

A bug I am facing with JqueryUI draggable/droppable

javascript

jquery

jquery-ui