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.

Answer 2

I found that at bootstrap 3 I had to override these css properties of the modal dialog:

.modal
{
    overflow: hidden;
    bottom: auto;
    right: auto;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

Fiddle

Full screen demo

Answer 3

I found a few ways to fix this.

Adding this to your CSS file will disable the transition effects while the modal is being dragged. It appears however that once the user drags the box the fly in will not occur correctly but rather it will just fade in.

.modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

Alternatively adding the following to your CSS file and the nofly class to your model will disable the fly in all together but not the fade in:

.modal.fade.nofly {
    top: 10%;        
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

Answer 4

I prefer using jqueryui. More detail about draggable API here: http://api.jqueryui.com/draggable/

Answer 5

This does not exactly answer your questions, but you may try to disable the *-transition properties or decreasing the time value from the specified 0.3s. This is defined in .modal.fade. But this will mess with the initial pop-up animation too. If this is not acceptable, you may use the start event of the draggable widget to apply the new style.

Answer 6

Although the suggested CSS changes worked for me, I didn't like the dialog being shown on the left initially. Upgrading jquery UI from 1.9 to 1.11 fixed the issue I was seeing