Question

I have a draggable/droppable script where if the draggable is dropped then the elements in that div will append to the droppable div. Once dropped a clear button will show to remove the contents in the div as seen below

$(e.target).append(ui.draggable.html() + '<br/>');
//can use $(this) or (e.target)
$("#add_friend").show().fadeOut(12000);
$(e.target).droppable("destroy");
$(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
    $(this).empty();
});

The problem I am having is that after the html is removed from the droppable div I cannot re-drag and append again. Example Shown Here. I want to be able to re-drag and drop elements after I remove the contents. I would greatly appreciate knowing how to fix this problem and understanding why this is so.

Answer 1

You dont want to destroy droppable but to disable it, you should do something like that:

$(e.target).append(ui.draggable.html() + '<br/>');
            //can use $(this) or (e.target)
            $("#add_friend").show().fadeOut(12000);
            $(e.target).droppable("disable");
            $(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
                $(this).empty()
                       .droppable("enable");
            });