jQuery-UI trascinabile: div non segue il mouse correttamente orizzontale

Question

Ecco un breve demo. Voglio rendere trascinabile un dialogo. È orizzontale centrato via css nel seguente modo:

div.dialog-container { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

La mia finestra di dialogo contiene un'intestazione e un div di contenuto. L'intera finestra di dialogo deve essere trascinata trascinando l'intestazione. Così ho usato il widget di jQuery UI-.draggable() in questo modo:

$("div.dialog-container").draggable({ 
    handle: "div.dialog-header" 
}); 

Il problema è: trascinare la finestra di dialogo intorno opere, ma non il modo in cui si intende. Verticalmente la finestra di dialogo segue il mouse perfetto ma orizzontalmente segue il mouse troppo lento quindi è possibile lasciare la finestra di dialogo mentre si trascina (ad esempio fare clic sull'intestazione sulla destra e trascinare la finestra di dialogo a destra). La cosa interessante è: Rimozione di "margine: auto;" corregge il problema ma l'elemento non è più centrato. Centrare il div con javascript non è un'opzione. Hai qualche idea su come risolvere questo problema?

Answer 1

Se la finestra ha una larghezza fissa, provare

left: 50%; 
margin: auto; 
margin-left: -200px; 

DEMO

Answer 2

LIVE DEMO

div.dialog-container { 
    height: 250px; 
    width: 400px; 
    border: 1px solid black; 
    position: absolute; 
    left: 50%;    /* center */ 
    margin-left:-200px; /* width/2 */ 
    top: 100px; 
}