Как сделать динамически созданные элементы draggable()?

Я пытаюсь понять, как сделать динамически созданные divs draggable, поэтому я создал эту очень простую вещь, чтобы помочь мне. Я понимаю, что я должен использовать событие on() с нединамическим обработчиком. Благодаря тому, что элемент body обрабатывает событие клонирования в связанном JSfiddle, мне удалось сделать динамически созданные divs клонируемыми, но они не перетаскиваются. Что я делаю не так?

Заранее спасибо за помощь!

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

Ответ 1

во время создания класть класс "draggable" или id в элементе. (вы не кладете класс), а затем код должен работать

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

Ответ 2

Я бы сделал что-то вроде this

Я вызываю метод draggable после добавления элементов в контейнер, например:

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

Ответ 3

У меня была та же проблема. Принятый ответ, безусловно, работает, но я искал более чистое, более централизованное решение. Я не хотел, чтобы явным образом вызывал .draggable() каждое место, где мои script вставили новые элементы.

Я остановился на прослушивании вставок DOM на родительском элементе, а затем применил .draggable() для вставленных детей. Например:

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

Ознакомьтесь с этой скриптой для демонстрации: http://jsfiddle.net/9hL7u95L/

Ответ 4

Добавьте класс draggable к динамически добавленным элементам.

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

});

Ответ 5

Вы можете сделать это следующим образом:

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

});

Рабочая демонстрация

Ответ 6

Ive добавил некоторые бит к вашей игре, надеюсь, это поможет: http://jsfiddle.net/m3BXZ/8/

В основном Ive создал функцию, называемую startDrag, которая делает новые блоки перетаскиваемыми:

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

Есть много способов сделать это, просто найдя, какое решение вам подходит.

Ответ 7

использовать

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

Ответ 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);
        });