Question

方案

我有一个文本区域，在div下面，可以预览文本区域中用户所写的内容。使用事件keyup

在elementr div中进行预览

问题

我允许用户将列表的某些字段拖放到文本区域中，当用户在文本区域中放置元素时，我无法进行预览，直到用户进行输入。那是因为事件与textarea相关联它是keyup所以我想知道当用户在textarea中删除元素时我可以使用的女巫事件我可以获得值并在div中显示它。

由于

更新

代码

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>

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>' + aux + '</p>'
   if (aux)
        displayMessage = aux;

   $messageValues.append(aux);

}

Answer 1

试试这个

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

Answer 2

您可以替换下面的代码并尝试一下吗？我试图在拖动完成后触发textarea的keyup事件。

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

Answer 3

Google Chrome，Firefox和IE 9 +支持称为'dragstart'，'ondragenter'，'ondragover'的活动。

旁边，我认为你可以使用jQuery UI：http://jqueryui.com/demos/droppable/

jquery中的事件textchange

3 个答案: