Droppable textarea cannot be dropped after keyboard editing, using jQuery UI

I am using jQuery UI. The code example is here: http://jsfiddle.net/ekzhu/H4GjU/

The items in #elements should be dragged and dropped onto the textarea. However, after some keyboard editing on the textarea, it can no longer be dropped.

Could anyone tell me what the problem is and how can I fix it?

Update:

Thanks my friend just suggested me a solution. I should've used .val() instead of .html() and .text(). $('textarea').html() will return what was originally set in between the textarea tags. $('textarea').val() will return what is currently in th开发者_Go百科e textarea.

you also can use this :

$(function() {
$("#elements li b").draggable({
    appendTo: "body",
    helper: "clone",
    drag: function(event, ui) {
        $(this).remove();
    }
});
$(".to_drop").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    // accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {

        var old = $(this).val();
        if (old == "") {
            $(this).val(ui.draggable.text());
        } else {
            $(this).val(old + ", " + ui.draggable.text());
        }


    }
})

});

this url:

Click Here