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;」を削除することです。問題は修正されましたが、要素は中央に配置されなくなりました。divをjavascriptで中央に配置することはできません。その問題を解決する方法について何かアイデアはありますか？

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 に答える