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.

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

Example ,
Source .
In IE9, it works as expected.
In Chrome, horizontal dragging works as expected, and vertical dragging is rather slow but not problematic.
In Firefox, horizontal dragging works as expected, but vertical dragging is extremely slow.

It's strange, because the example window is not graphically heavy and JQuery is supposed to normalize browser behavior. I tried solving this without using JQuery's draggable, but I ran into the same issue.

So I have a couple of questions:

• Is the slow performance the fault of the browser, JQuery, Bootstrap or is my code not optimal?
• Why is there a difference between horizontal and vertical dragging?
• Should I find a workaround, or just avoid Bootstrap altogether for dynamic popups?

Kind regards, Guido

Answer 1

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

Answer 2

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 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

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 5

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 6

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