jQuery-UI ziehbar: div folgt Maus nicht korrekt horizontal

Question

Hier ist eine kurze demo. Ich möchte einen Dialog ziehbar machen. Es ist horizontal zentriert über CSS auf die folgende Weise:

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

Mein Dialogfeld enthält eine Kopfzeile und ein Inhalt div. Der gesamte Dialog wird durch Ziehen der Kopfzeile gezogen. So verwendete ich die jQuery-UI .draggable() Widget wie folgt aus:

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

Das Problem ist: den Dialog um Arbeiten ziehen, aber nicht so, wie es beabsichtigt ist. Vertikal folgt der Dialog der Maus perfekt aber horizontal folgt die Maus zu langsam so ist es möglich, den Dialog beim Ziehen um (zum Beispiel klicken Sie auf die Kopfzeile ganz rechts und ziehen Sie den Dialog nach rechts). Das Interessante ist: Entfernen von "margin: auto;" behebt das Problem, aber das Element ist nicht mehr zentriert. Zentrieren der div mit Javascript ist keine Option. Haben Sie Ideen, wie Sie dieses Problem beheben können?

Answer 1

Wenn Ihr Dialog eine feste Breite hat, versuchen

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