Próbuję wymyślić, w jaki sposób można dynamicznie tworzyć divy, które można przeciągać, więc stworzyłemto bardzo prosta rzecz pomóc mi. Rozumiem, że muszę użyć zdarzenia on () z nie-dynamicznym programem obsługi. Dzięki temu, że element body obsługuje zdarzenie klonowania w połączonym JSfiddle, udało mi się sprawić, że dynamicznie tworzone div będą klonowane, ale nie można ich przeciągać. Co ja robię źle?

Z góry dziękuję za pomoc!

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