Draggable JS Bootstrap Modal - Leistungsprobleme

Question

Für ein Projekt bei der Arbeit verwenden wir Bootstrap Modal Fenster in JavaScript. Wir möchten einige der Fenster beweglich machen, aber wir stoßen auf Leistungsprobleme mit JQuery.

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

Example,
Source.
In IE9 funktioniert es wie erwartet.
In Chrome funktioniert das horizontale Ziehen wie erwartet und das vertikale Ziehen ist eher langsam, aber nicht problematisch.
In Firefox funktioniert horizontales Ziehen wie erwartet, aber vertikales Ziehen ist extrem langsam.

Es ist seltsam, weil das Beispielfenster nicht grafisch schwer ist und JQuery das Browserverhalten normalisieren soll. Ich habe versucht, dies zu lösen, ohne JQuery ziehbare zu verwenden, aber ich stieß auf das gleiche Problem. So

Ich habe ein paar Fragen:

• Ist die langsame Performance der Fehler des Browsers, JQuery, Bootstrap oder ist mein Code nicht optimal?
• Warum gibt es einen Unterschied zwischen horizontalem und vertikalem Ziehen?
• Sollte ich eine Problemumgehung finden, oder Bootstrap für dynamische Popups zusammen vermeiden?

Mit freundlichen Grüßen Guido

Answer 1

Ich fand ein paar Möglichkeiten, das zu beheben.

Wenn Sie dies Ihrer CSS-Datei hinzufügen, werden die transition Effekte deaktiviert, während das Modal gezogen wird. Es scheint jedoch, dass, sobald der Benutzer das Feld der schleppt nicht richtig auftreten fliegen wird, sondern es wird nur in verblassen.

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

Alternativ können Sie die folgende in der CSS-Datei und die nofly Klasse zu Ihrem Modell hinzugefügt wird deaktivieren fliegen in alle zusammen, aber nicht die Einblendung:

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

Diese nicht genau Ihre Fragen beantworten, aber Sie können versuchen, die *-transition Eigenschaften zu deaktivieren oder den Zeitwert aus den angegebenen 0.3s abnimmt. Dies ist in .modal.fade definiert. Aber das wird auch mit der anfänglichen Popup-Animation zu tun haben. Wenn dies nicht akzeptabel ist, können Sie das start Ereignis des draggable-Widgets verwenden, um den neuen Stil anzuwenden.

Answer 3

fand ich, dass bei Bootstrap 3 ich diese CSS-Eigenschaften des modalen Dialog außer Kraft zu setzen hatte:

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

Fiddle

Full screen demo

Answer 4

I jQueryUI mit bevorzugen. Mehr Details über ziehbare API hier: http://api.jqueryui.com/draggable/

Answer 5

Mit Bootstrap 3.3 und jQuery UI 1.1 Ich füge eine Klasse namens "modal-ziehbare" zum Element mit der "modalen" Klasse.

Es bindet an das .modal-dialog Element in Containern mit der .modal-draggable Klasse (im Gegensatz zu einigen Beispielen hier, die an den eigentlichen Container binden).

Es gibt einige CSS, so dass Scrollen für lange Dialoge immer noch auf Geräten aller Bildschirmgrößen funktioniert.

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

Siehe JS Fiddle hier für eine Demo: http://jsfiddle.net/jcosnn6u/3/

NB: Bisher habe ich getestet dies nur in Chrome, Firefox und Safari und mobile Geräte, also kann nicht mit dem Internet Explorer kompatibel kommentieren Qualität.

Answer 6

Obwohl die vorgeschlagenen CSS-Änderungen für mich funktionierte, mochte ich nicht den Dialog auf der linken Seite zunächst angezeigt. Das Upgrade von jquery UI von 1.9 auf 1.11 behebt das Problem, das ich sah