2

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

问题：输入.droppable()<textarea>后，功能被破坏。

我可以单击内部<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>. 我不相信这与这个问题有任何关系（因为拖放文本会消除显示的占位符文本......

4

1 回答 1

3

问题是您正在使用该text()函数来获取/设置 textarea 值，您真正想要的是val(). 另外，我不认为您想要.appendTo(this)更新 textarea 值的调用，并且您不需要用 包装对 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());
于 2013-04-01T22:03:33.083 回答