I am building an ember application. I want to add a floating div over a page or floating modal, keeping the page active.

I have added the above code in the didInsertElement hook of the modal component. i get an error draggable is not a function. Let me know if i can float a div on the page with or without using modal

<div id="floatModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'close'}}>&times;</button>
             <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">
           {{yield}}
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

@$('.modal-dialog').draggable({
        handle: '.modal-header'
})