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