how do i make dynamically created elements draggable()?

javascript jquery draggable
thatpaintingelephant picture thatpaintingelephant · Sep 13, 2013 · Viewed 27.5k times · Source

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

Jhankar Mahbub picture Jhankar Mahbub · Sep 13, 2013

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

Related questions

Jquery UI Draggable: Align helper to mouse position

With jQuery I have a draggable element. It's a div with a size of 200 x 40. Of course the user can start dragging this div by clicking at variuos positions in the div. What I want is when the startdrag event …

Read More
How to start mouseover event while dragging

When I drag an element over another div on which I have a mouseover event, the event doesn't trigger. However, it works if I hover over it without dragging. Is there a way to detect hover events on an element …

Read More
clone node on drag

i want to be able to create a copy of the element that i want to drag. im using the standard ui draggable and droppable. i know about the helper clone option. but that does not create a copy. the …

Read More