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

Question

这是一个简短的演示。我想让一个对话框可拖动。它通过 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;

演示版