it-swarm.com.ru

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

Я пытаюсь понять, как сделать динамически создаваемые элементы 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();
});
12
thatpaintingelephant

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

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

Я хотел бы сделать что-то вроде это

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

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

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

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

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

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

4
Andrew Tevington

Добавьте перетаскиваемый класс к динамически добавляемым элементам.

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

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

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

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

3
azzy81

использование 

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

.добавить в

2
Tushar Gupta

Попробуйте это (пример):

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