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>

Thanks so much for posting this! A project I got involved in lately had some weird bug where dragging the window would drag the parent window's scroll bar. This fixed it!

Thanks from me too! Saved github.com/openhardwarecoza/LaserWeb (: from the scrollbar dragging with the modal. @nathanielstenzel sent me the pull and I merged it this morning.

Laserweb is a node.js based, in browser CAM/Machine control for Laser Cutters

Exactly what I was looking for. Thanks!

Is it possible to make it non modal? Thanks.

Exactly what i needed! It was so helpful!!

Thanks!!

Thanks very much, it's just I need and helpful!. 💯

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