Question

I did a small rate system with jQuery where the user can drag numbers to another element. I want the user to be able to drag a new number, but then remove the number (element) the user dropped before.

Right now I am just disabling the droppable but that stops the function obviously

$('#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

Remove previously dropped objects, with this line:

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

So your code will be:

$('#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');
    }
});