jQuery-UI可拖動：div不跟隨鼠標正確水平

Question

這裏是一個簡短的demo。我想讓對話框可以拖動。它通過css水平居中以下方式：

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

我的對話框包含一個標題和一個內容div。整個對話框將通過拖動標題來拖動。所以我用這樣的jQuery的UI .draggable（）控件：

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

的問題是：拖動周圍的作品對話，但不是它的目的是的方式。在垂直方向上，對話框遵循鼠標完美但水平地跟隨鼠標太慢所以可以在拖動對話框的同時拖動（例如，單擊最右邊的標題並將對話框拖到右邊 ）。 有趣的是：刪除「margin：auto;」修復了問題，但元素不再居中。以javascript爲中心的div是沒有選擇的。 你對如何解決這個問題有什麼想法嗎？

Answer 1

如果你的對話框有一個固定的寬度，儘量

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