Droggable JS Bootstrap modal - problemi di prestazioni

Question

Per un progetto al lavoro vengono utilizzate le finestre modali Bootstrap in JavaScript. Vorremmo rendere alcune delle finestre mobili, ma stiamo riscontrando problemi di prestazioni con JQuery.

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

Example,
Source.
In IE9, funziona come previsto.
In Chrome, il trascinamento orizzontale funziona come previsto e il trascinamento verticale è piuttosto lento ma non problematico.
In Firefox, il trascinamento orizzontale funziona come previsto, ma il trascinamento verticale è estremamente lento.

È strano, perché la finestra di esempio non è graficamente pesante e JQuery dovrebbe normalizzare il comportamento del browser. Ho provato a risolvere questo problema senza utilizzare il trascinamento di JQuery, ma mi sono imbattuto nello stesso problema.

quindi ho un paio di domande:

• è il rallentamento delle prestazioni per colpa del browser, JQuery, Bootstrap o è il mio codice non ottimale?
• Perché c'è una differenza tra trascinamento orizzontale e verticale?
• Devo trovare una soluzione alternativa o semplicemente evitare Bootstrap complessivamente per popup dinamici?

saluti, Guido

Answer 1

Ho trovato alcuni modi per risolvere questo problema.

Aggiungendo questo al file CSS, verranno disattivati ​​gli effetti transition mentre la modale viene trascinata. Sembra, tuttavia, che una volta che l'utente trascina la casella della mosca in non si verificherà in modo corretto, ma piuttosto sarà solo dissolvenza in entrata.

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

alternativa aggiungendo quanto segue al file CSS e la classe nofly al modello disabiliterà il volare in tutti insieme, ma non è la dissolvenza 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 2

Questo non risponde esattamente alle vostre domande, ma si può provare a disabilitare le *-transition proprietà o diminuendo il valore di tempo specificato dal 0.3s. Questo è definito in .modal.fade. Ma questo pasticcia anche con l'animazione pop-up iniziale. Se ciò non è accettabile, è possibile utilizzare l'evento start del widget draggable per applicare il nuovo stile.

Answer 3

ho scoperto che a bootstrap 3 ho dovuto ignorare queste proprietà CSS della finestra di dialogo modale:

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

Fiddle

Full screen demo

Answer 4

Io preferisco usare jQueryUI. Maggiori dettagli sulle API trascinabili qui: http://api.jqueryui.com/draggable/

Answer 5

Con Bootstrap 3.3 e jQuery UI 1.1 Sto aggiungendo una classe chiamata "modal-draggable" all'elemento con la classe "modal".

Si lega all'elemento all'interno di contenitori con la classe .modal-draggable (a differenza di alcuni esempi qui che si collegano al contenitore effettivo).

C'è del CSS, quindi lo scorrimento delle finestre di dialogo lunghe funziona ancora su tutti i dispositivi di tutte le dimensioni dello schermo.

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

Vedere la JS Fiddle qui per una demo: http://jsfiddle.net/jcosnn6u/3/

NB: Finora ho testato solo questo Chrome, Firefox e Safari e dispositivi mobili, quindi non posso commentare la compatibilità di Internet Explorer lità.

Answer 6

Sebbene le modifiche CSS consigliate funzionassero per me, non mi piaceva inizialmente la finestra di dialogo mostrata a sinistra. L'aggiornamento dell'interfaccia utente di jquery dalla 1.9 alla 1.11 ha risolto il problema che stavo vedendo