如何删除 droppable 中的元素以插入更多新元素 - jQuery

Question

我用 jQuery 做了一个小费率系统，用户可以将数字拖到另一个元素上。我希望用户能够拖动一个新数字，然后删除用户之前放置的数字（元素）。

现在我只是禁用 droppable 但这显然会停止该功能

$('#rate1, #rate2, #rate3, #rate4, #rate5').droppable({
                    accept: ('#drag_rate1, #drag_rate2, #drag_rate3, #drag_rate4, #drag_rate5'),
                    drop: function(ev, ui) { 
                        var numero = ui.draggable.html();
                        //var dedoid = ui.draggable.attr('id');
                        var bkg = ui.draggable.css('background-image');
                        var html = '<div class=\'number_dropped\' style=\'background-image: '+bkg+'\'>'+numero+'</div>';
                        $(this).append(html).hide().fadeIn('slow');
                        $(this).droppable('disable');
                    }
                });

Answer 1

删除以前放置的对象，使用此行：

$(this).find(".dedo_dropped").remove();

所以你的代码将是：

$('#rate1, #rate2, #rate3, #rate4, #rate5').droppable({
    accept: ('#dedo_up, #dedo_down'),
    drop: function(ev, ui) { 
        $(this).find(".dedo_dropped").remove();
        var dedo = ui.draggable.html();
        var bkg = ui.draggable.css('background-image');
        var html = '<div class=\'dedo_dropped\' style=\'background-image: '+bkg+'\'>'+dedo+'</div>';
        $('#dedo_pick').append(html).hide().fadeIn('slow');
        $(this).droppable('disable');
    }
});