4

動的に追加されたdivをドラッグアンドドロップ操作のターゲットにするのに問題があります。誰かがこのフィドルhttp://jsfiddle.net/dgobrien123/FvG2J/embedded/result/ を調べて、エラーを見つけるのを手伝ってくれる場合。

ドキュメントレディメソッドでは、次のようにドロップ可能オブジェクトが適用されます。

        $(".droppable").droppable({
            activeClass: 'dragactive',
            hoverClass: 'drophover',
            drop: function(event, ui) {                    
                alert( this.id );
                $(this).addClass('drophighlight').find('p').text( '' + ui.draggable.children("span").text() + '');
            }
        });

コンテナの追加方法は次のとおりです。

    function addGroup() {
        counter = counter + 1;
        $("div#pcgroups").append("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>");
        return counter;
    }
4

1 に答える 1

6

あなたが抱えている問題は、要素が作成される前にドロップ可能オブジェクトを適用していることです。addGroup（）メソッドで作成されたとおりに適用できます。

function addGroup() {
    counter = counter + 1;
    var x = $("<div class='dropcontainer'><div class='droppable' id='GROUP" + counter + "'><p>PC GROUP #" + counter + "</p></div></div>");

    $("div#pcgroups").append(x);
    x.droppable({
        activeClass: 'dragactive',
        hoverClass: 'drophover',
        drop: function(event, ui) {
            alert(this.id);
            $(this).addClass('drophighlight').find('p').text('' + ui.draggable.children("span").text() + '');
        }
    });
}

更新されたフィドル：

http://jsfiddle.net/johnkoer/FvG2J/28/

于 2012-09-19T17:49:32.710 に答える