Draggable Bootstrap Modal

1.draggable-modal.js

$('.modal.draggable>.modal-dialog').draggable({
    cursor: 'move',
    handle: '.modal-header'
});
$('.modal.draggable>.modal-dialog>.modal-content>.modal-header').css('cursor', 'move');

2.usage.md

1. requires jquery.js and jquery.ui.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>

2. add class draggable to modal container.

<div class="modal draggable fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">...</div>
            <div class="modal-body">...</div>
            <div class="modal-footer">...</div>
        </div>
    </div>
</div>

The modal is scrolling above the window, once it moved under browser bar we have to refresh the page. How can i fix it?? prevent dragging out a parent

Thank you so much. It works perfectly. It's what exactly what I've been looking for.

i need full example for using it

Very helpful!! Thanks!

cannot work