Modem do przeciągania JS Bootstrap - problemy z wydajnością

Question

Do projektu w pracy używamy okien Bootstrap Modal w JavaScript. Chcielibyśmy, aby niektóre okna były ruchome, ale mamy problemy z wydajnością w JQuery.

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

Example,
Source.
W IE9 działa zgodnie z oczekiwaniami.
W przeglądarce Chrome przeciąganie działa zgodnie z oczekiwaniami, a pionowe przeciąganie jest raczej powolne, ale nie stanowi problemu.
W przeglądarce Firefox przeciąganie w poziomie działa zgodnie z oczekiwaniami, ale pionowe przeciąganie jest bardzo powolne.

To dziwne, ponieważ przykładowe okno nie jest graficznie ciężkie, a JQuery ma znormalizować zachowanie przeglądarki. Próbowałem rozwiązać ten problem bez użycia przeciągania JQuery, ale wpadłem na ten sam problem.

Więc mam kilka pytań:

• Czy niska wydajność to wina przeglądarki, jQuery, Bootstrap lub jest mój kod nie jest optymalny?
• Dlaczego występuje różnica pomiędzy przeciąganiem w poziomie i w pionie?
• Czy powinienem znaleźć obejście, lub po prostu unikać Bootstrapa w ogóle dla dynamicznych wyskakujących okienek?

poważaniem, Guido

Answer 1

Znalazłem kilka sposobów, aby to naprawić.

Dodanie tego do pliku CSS spowoduje wyłączenie efektów transition podczas przeciągania modalu. Wydaje się jednak, że gdy użytkownik przeciąga Box latać nie wystąpią poprawnie, ale raczej będzie to po prostu znikną w.

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

Alternatywnie dodanie następujących do pliku CSS i klasy do modelu nofly będzie wyłączyć latać we wszystkich razem, ale nie blaknie w:

.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

nie dokładnie odpowiedzieć na Twoje pytania, ale można spróbować wyłączyć właściwości lub zmniejszając wartość czasu z określonej 0.3s*-transition. Jest to zdefiniowane w .modal.fade. Ale będzie to zepsuło także początkowa animacja pop-up. Jeśli jest to niedopuszczalne, możesz użyć zdarzenia start widżetu draggable, aby zastosować nowy styl.

Answer 3

Okazało się, że w bootstrap 3 musiałem zastąpić te właściwości cSS na modalnego okna dialogowego:

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

Fiddle

Full screen demo

Answer 4

Wolę używając jQueryUI. Więcej szczegółów na temat przeciągania API tutaj: http://api.jqueryui.com/draggable/

Answer 5

Z Bootstrap 3.3 i jQuery UI 1.1 Dodaję klasę o nazwie "modal-przeciągalna" do elementu z klasą "modalną".

Wiąże się z elementem .modal-dialog wewnątrz kontenerów z klasą .modal-draggable (w przeciwieństwie do niektórych przykładów tutaj, które wiążą się z rzeczywistym kontenerem).

Jest trochę CSS, więc przewijanie długich dialogów nadal działa na urządzeniach wszystkich rozmiarów ekranu.

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

Zobacz JS Fiddle tutaj demo: http://jsfiddle.net/jcosnn6u/3/

NB: Do tej pory tylko przetestowane w Chrome, Firefox i Safari oraz urządzenia mobilne, więc nie można komentować kompatybilności Internet Explorera ity.

Answer 6

Mimo że sugerowane zmiany w CSS działały u mnie, nie podobało mi się, że okno dialogowe jest początkowo wyświetlane po lewej stronie. Uaktualnienie interfejsu jQuery od 1.9 do 1.11 naprawiło problem, który widziałem