Draggable not working after using jquery load function

Question

I'm creating a html builder for my project which including importing a template and edit via drag and drop. I used jquery's load() function to import template to my console page. But after the load function is completed,the draggable become undefined. This is the error i'm getting after load function.

Uncaught TypeError: $(...).draggable is not a function

Here is my code

$(document).ready(function(){
   enableDrag();
   $("#canvas").load("../collectionTemplates/apparel/index.html", function(){
        $('.element').draggable({
           helper: 'original',
           containment: '#canvas',
           tolerance: 'fit'
        });
        $('.element').find('.ui-resizable-handle').remove();
        $('.element').resizable({
           minHeight: 40,
           minWidth: 50,
           maxWidth: 796,
           handles: 'e, w, s, n'
        });

    });
});

Where enableDrag() is initial function to give drag and drop to the tools. In that draggable is working perfectly. But if i call the draggable in callback of the load function it's not working. Anyone know what's happening?