jQuery-UI draggable：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;
}