16

動的に作成された div をドラッグ可能にする方法を理解しようとしているので、この非常に単純なものを作成して助けてくれました。非動的ハンドラーで on() イベントを使用する必要があることを理解しています。リンクされた JSfiddle で body 要素がクローン作成イベントを処理するようにすることで、動的に作成された div をクローン可能にすることに成功しましたが、それらはドラッグ可能ではありません。私は何を間違っていますか？

助けてくれてありがとう！

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});
4

8 に答える 8

10

私はこのようなことをします

draggable次のように、コンテナに要素を追加した後にメソッドを呼び出しています。

 $("<div class='bl pink'></div>").appendTo('.container').draggable();
于 2013-09-13T15:00:27.633 に答える
3

以下の方法で実行できます。

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink draggable'></div>"));
        $('.draggable').draggable();
    });

    $('.container').on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.container').on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.draggable').draggable();

});

ワーキングデモ

于 2013-09-13T15:01:00.450 に答える
3

うまくいけば、あなたのフィドルにいくつかのビットを追加しました：http://jsfiddle.net/m3BXZ/8/

基本的に、新しいブロックをドラッグ可能にする startDrag という関数を作成しました。

function startDrag(){
    $(".bl").draggable();
}

これを行うには多くの方法があります。自分に最適なソリューションを見つけるだけです。

于 2013-09-13T15:01:19.703 に答える
3

使用する

$("<div class='bl blue'></div>").draggable().appendTo($('.container'));

デモ

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });

    $('.container').on('click', '.blue', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });
    $('.container').on('click', '.coral', function () {
        $("<div class='bl coral'></div>").draggable().appendTo($('.container'));
    });

    $(".draggable").draggable();
});

.appendTo

于 2013-09-13T15:00:38.880 に答える