how do i make dynamically created elements draggable()?

Question

I'm trying to figure out how to make dynamically created divs draggable, so I've created this very simple thing to help me. I understand that I have to use the on() event with a non-dynamic handler. By having the body element handle the cloning event in the linked JSfiddle, I've succeeded in making the dynamically created divs clonable, but they are not draggable. What am I doing wrong?

Thank you in advance for the help!

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

at time of creation put class "draggable" or id in the element. (you are not putting class) and then code should work

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

Answer 2

I would do something like this

I'm calling the draggable method after I add the elements to the container, like this:

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

Answer 3

I had the same problem. The accepted answer certainly works, but I was looking for a cleaner, more centralized solution. I didn't want to explicitly call .draggable() every place my script inserted new elements.

What I settled on was listening for DOM inserts on the parent element and then applying .draggable() on the inserted children. For example:

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

Check out this fiddle for a demo: http://jsfiddle.net/9hL7u95L/

Answer 4

use

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

Add draggable class to the dynamically added elements.

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

You can do it the below way:

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

});

Working Demo

Answer 7

Ive added some bits to your fiddle hopefully it will help: http://jsfiddle.net/m3BXZ/8/

Basically Ive made a function called startDrag that makes the new blocks draggable:

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

Theres many ways to do this its just finding which solution suits you best.

Answer 8

Try this (example):

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