event textchange in jquery

The scenario

I'm have a text area and below a div to preview what the user it's writing in the text area. The preview in the elementr div it's made with the event keyup

The problem

I allow to the user to drag and drop some fields of the list into the text area and when the user drop the element in the text area i can't make a preview until the user do an input. That's because the event associate to the textarea it's a keyup so i want to know witch event i can use when the user drop the element in the textarea i can get the value and show it in the div.

Thanks

UPDATE

THE CODE

html

<div id="divFields">
    <ul class="fieldStyle">
        <li class="ui-draggable">Prueba</li>
    </ul>
</div>  
<textarea id="txtMessageFields" name="txtMessageFields" class="required" cols="20" rows="2"></textarea>
<div id="messagePreview"></div> 

the js

/*****The called to the method that make the preview***/
$("#txtMessageFields").keyup(previewData);

/****Adding the drag and drop Event handler*****/
$("#divFields li").draggable({
    helper: "clone"
});


$("#divDroppedFields").droppable({
    accept: "#divFields li",
    drop: function (event, ui) {
        messageValue = '';
        messageValue = messageValue + $("#txtMessageFields").val();
        $("#txtMessageFields").val('');
        messageValue = messageValue + ' #' + ui.draggable.text() + '! ';
        $(this).find('#txtMessageFields').val(messageValue);
    }

/***Manage the preview about the user writing values ****/
function previewData() {
    $messageValues.html('');
    var aux = this.value.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>');
    aux = aux.replace(/#/g, '<span class="fieldText">');
    aux = aux.replace(/!/g, '</span>');
   aux = '<p开发者_如何学C>' + aux + '</p>'
   if (aux)
        displayMessage = aux;

   $messageValues.append(aux);

}

Can you replace the below piece of code and try it? I am trying to trigger the keyup event of textarea once the drag is complete.

$("#divDroppedFields").droppable({
    accept: "#divFields li",
    drop: function (event, ui) {
        messageValue = '';
        messageValue = messageValue + $("#txtMessageFields").val();
        $("#txtMessageFields").val('');
        messageValue = messageValue + ' #' + ui.draggable.text() + '! ';
        $(this).find('#txtMessageFields').val(messageValue).trigger('keyup');
    }

Try this

$("textarea").mouseup(function(){ //code to update the preview container; });

there are events called 'dragstart', 'ondragenter', 'ondragover' which are supported by Google Chrome, Firefox and IE 9+.

beside, I think you can jQuery UI: http://jqueryui.com/demos/droppable/