Draggable JS Bootstrap modal - performance issues

Question

For a project at work we use Bootstrap Modal windows in JavaScript. We would like to make some of the windows movable, but we are running into performance issues with JQuery.

Answer 1

With Bootstrap 3.3 and jQuery UI 1.1 I'm adding a class called "modal-draggable" to the element with the "modal" class.

It binds to the .modal-dialog element inside containers with the .modal-draggable class (unlike some examples here which bind to the actual container).

There is some CSS so scrolling for long dialogs still work across devices of all screen sizes.

CSS:

.modal-draggable .modal-backdrop {
  position: fixed;
}

.modal.modal-draggable {
    overflow: overflow-y;
}

.modal-draggable .modal-header:hover {
  cursor: move;
}

JavaScript:

$(".modal-draggable .modal-dialog").draggable({
  handle: ".modal-header"
});

See the JS Fiddle here for a demo: http://jsfiddle.net/jcosnn6u/3/

NB: So far I have only tested this in Chrome, Firefox and Safari and mobile devices, so can't comment on Internet Explorer compatibility.