jQuery-UI 可拖动：div 不能正确跟随鼠标水平

Question

这里有一个简短的演示。我想使对话框可拖动。它通过css以以下方式水平居中：

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

我的对话框包含一个标题和一个内容分区。通过拖动标题可以拖动整个对话框。所以我使用了jQueryUI.draggable((小部件，如下所示：

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

问题是：拖动对话框是有效的，但不是预期的方式。对话框在垂直方向上完全跟随鼠标，但在水平方向上跟随鼠标太慢，因此可以在拖动时离开对话框(例如，单击最右侧的标题并将对话框向右拖动(有趣的是：删除"margin:auto；"可以解决问题，但元素不再居中。无法使用javascript将div居中。你对如何解决那个问题有什么想法吗？

Answer 1

如果对话框的宽度固定，请尝试

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

演示

Answer 2

现场演示

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