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