Geek asks and answers

JQuery-UI draggable: div does not follow the mouse correctly horizontally

Here is a short demo . I want to make the dialog draggable. It is centered on the css as follows:

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

My dialog box contains the title and contents of the div. The whole dialog needs to be dragged by dragging the title. Therefore, I used the jQuery-UI.draggable () widget as follows:

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

The problem is this: drag and drop dialogue around work, but not in the way it is intended. The dialog vertically follows the mouse other than , but horizontally it moves too slowly with the mouse , so you can leave the dialog while dragging (for example, click on the title on the right) and drag the dialog to the right one). Interesting thing: Removing "margin: auto;" resolves the issue, but the item is no longer centered. Centering a div using javascript is not an option. Do you have any ideas for resolving this issue?

+4
source share
2 answers

If your dialog box has a fixed width, try

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

Demo

+3
source

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;
}
+2
source

More articles:


All Articles