web-dev-qa-db-ja.com

動的に作成された要素をdraggable（）にするにはどうすればよいですか？

動的に作成された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();
});
javascriptjquerydraggable
15
thatpaintingelephant

作成時に、クラスに「ドラッグ可能」またはIDを要素に入れます。 （あなたはクラスを入れていません）そしてコードはうまくいくはずです

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
18
Jhankar Mahbub

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

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

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

私も同じ問題を抱えていました。受け入れられた答えは確かに機能しますが、私はよりクリーンで集中化されたソリューションを探していました。スクリプトが新しい要素を挿入するすべての場所で.draggable（）を明示的に呼び出したくありませんでした。

私が解決したのは、親要素のDOM挿入をリッスンし、挿入された子に.draggable（）を適用することでした。例えば：

$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });

このフィドルのデモを確認してください： http://jsfiddle.net/9hL7u95L/

4
Andrew Tevington

使用する

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

[〜＃〜] demo [〜＃〜]

$(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

3
Tushar Gupta - curioustushar

動的に追加された要素にドラッグ可能なクラスを追加します。

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

});
3
Thomas

あなたはそれを以下の方法で行うことができます：

$(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();

});

作業デモ

3
Harry

私はあなたのフィドルにいくつかのビットを追加しましたがうまくいけばそれは助けになります： http://jsfiddle.net/m3BXZ/8/

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

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

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

3
azzy81

これを試してください（例）：

       $('.btn-hotspot-add').click(function(){
            //Create element and append draggable action
            var element = $('<span class="hotspot"></span>').draggable({
                'containment': "parent",
                'stop': function(Elm){
                    //Sample stop action
                    var parentWith = Elm.target.offsetParent.offsetWidth;
                    var parentHeight = Elm.target.offsetParent.offsetHeight;
                    var x = Elm.target.offsetLeft;
                    var y = Elm.target.offsetTop;
                    console.log(parentWith+'x'+parentHeight+' - '+x+'x'+y );

                }
            });

            //Append draggable element to parent container
            $('#parent').append(element);
        });
0
Piotr Nowak