我如何使動態創建的元素draggable（）？

Question

我正在試圖弄清楚如何使動態創建的div可拖動，所以我創建了這個非常簡單的東西來幫助我。 我知道我必須使用非動態處理程序的on（）事件。 通過讓body元素處理鏈接的JSfiddle中的克隆事件，我成功地使動態創建的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();
});

Answer 1

在創建時將類“draggable”或id放在元素中。 （你沒有上課）然后代碼應該工作

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

Answer 2

我會做一些像這樣

我將元素添加到容器后調用draggable方法，如下所示：

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

Answer 3

我有同樣的問題。 接受的答案肯定有效，但我一直在尋找更清潔，更集中的解決方案。 我不想在我的腳本插入新元素的每個地方顯式調用.draggable（）。

我確定的是在父元素上偵聽DOM插入，然后在插入的子元素上應用.draggable（）。 例如：

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

看看這個小提琴演示： http ： //jsfiddle.net/9hL7u95L/

Answer 4

使用

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

Answer 5

將可拖動類添加到動態添加的元素中。

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

});

Answer 6

您可以通過以下方式執行此操作：

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

});

工作演示

Answer 7

我已經為你的小提琴添加了一些內容，希望它會有所幫助： http ： //jsfiddle.net/m3BXZ/8/

基本上我已經創建了一個名為startDrag的函數，它使新塊可以拖動：

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

有很多方法可以幫助您找到最適合您的解決方案。

Answer 8

試試這個（例子）：

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