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

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