Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how do i make dynamically created elements draggable()?

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();
});
like image 458
thatpaintingelephant Avatar asked Sep 13 '13 14:09

thatpaintingelephant


People also ask

How do I make elements draggable in HTML?

To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.


1 Answers

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() 
like image 194
Jhankar Mahbub Avatar answered Oct 03 '22 21:10

Jhankar Mahbub