4

这是一个简短的演示。我想让一个对话框可拖动。它通过以下方式通过 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 是没有选择的。您对如何解决该问题有任何想法吗？

4

2 回答 2

4

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

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

演示

于 2013-02-25T10:21:04.403 回答
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;
}
于 2013-02-25T10:19:03.783 回答