2

ユーザーが事前設定された応答を「返信」にドラッグアンドドロップできるようにするインターフェイスを作成しています<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>ます。これが問題とは何の関係もないと思います（テキストをドラッグアンドドロップすると、表示されたプレースホルダーテキストが削除されるため...

4

1 に答える 1

3

問題は、text()関数を使用して textarea 値を取得/設定していることです。実際に必要なのはval(). また、.appendTo(this)textarea の値を更新する呼び出しは必要ないと思います。 init への呼び出しを でラップする必要はありませ$()んinit();。次の 2 行を変更すると、動作するはずです。

これを変える：

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 に答える