Make jQuery UI Draggable Cursor centered in Bootstrap Modal when dragging

Question

Say you have a basic Bootstrap Modal

And you try to make it draggable using jQuery UI.

You can simply do, this $('#myModal').draggable()

This works great, however I've noticed the speed of the cursor can be a lot faster than how the speed of the modal's dragging. This can result in the cursor being far ahead of the actual modal and things looking wonky.

Here's an example of what I mean https://jsfiddle.net/dzmqg8ub/3/

Any solutions to this?

Thanks!

Answer 1

This should work!

the "lagg" your experiencing is because of

<div class="modal-dialog modal-sm"

by removing modal-dialog and inserting modal-dialog in 1 div above that

<div class="modal-dialog modal fade" id="modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >

it solves your issue!

here is a demo