jquery - jQuery UI 拖放问题 - 在文本区域中输入内容后不允许拖放

Question

我正在创建一个界面，允许用户将预设响应拖放到“回复”中<textarea> 。我决定使用 jQuery UI。

问题:输入 <textarea> 后，.droppable() 功能已损坏。

我可以在 <textarea> 内单击然后将文本放入其中，但输入后，我无法将任何文本放入 <textarea> ...

jQuery:

$(document).ready(function(){

    $(init);

    // Initialization
    function init(){
        // Draggable
        $(".response").draggable({
            helper : "clone",
            cursor : "move"
        });

        // Droppable
        $(".survey-reply textarea").droppable({
            accept : ".response",
            drop : dropResponse
        });
    }

    // When Dropped
    function dropResponse(event,ui) {

        var draggable = ui.draggable;

        // Get existing text
        var text = $(this).text();

        // If field is empty then just apply the dragged response
        if (text == "") {
            $(this).text(draggable.children(".saved-response").val()).appendTo(this);
        }
        // If not, then add the dragged response to the present text
        else {
            $(this).text(text + ' ' + draggable.children(".saved-response").val()).appendTo(this);
        }

    }

});

这(几乎)满足了我的需要。它允许我拖动 <li>回复 <textarea> 。它还会编译文本，而不是替换 <textarea> 中的文本。 .

它不做什么:我需要用户能够输入 <textarea> ，然后将响应拖至 <textarea> ，此时预设响应将添加到键入的文本中。

目前，我可以在 <textarea> 内单击，当它处于焦点时，将响应拖入其中。但由于某种原因，输入 <textarea>禁用可放置事件...

如果有人可以帮助我弄清楚如何在文本区域中输入内容，然后将响应拖到同一文本区域中，我将不胜感激!

注意:我没有包含 HTML，但我向您保证，选择器是准确的。我确实有一个占位符属性应用于 <textarea> 。我不认为这与该问题有任何关系(因为拖放文本会消除显示的占位符文本...

Answer 1

问题是您正在使用 text() 函数来获取/设置 textarea 值，您真正想要的是 val()。另外，我认为您不希望在更新 textarea 值时进行 .appendTo(this) 调用，并且不需要使用 $() 包装对 init 的调用，你只需执行init();即可。更改这两行，它应该可以工作:

更改此:

var text = $(this).text();

到

var text = $(this).val();

并更改此:

$(this).text(text + ' ' + draggable.children(".saved-response").val()).appendTo(this);

对此:

$(this).val(text + ' ' + draggable.children(".saved-response").val());