jQuery-UI có thể kéo được: div không theo con chuột chính xác ngang

Question

Đây là một số demo ngắn. Tôi muốn tạo một hộp thoại có thể kéo được. Nó nằm ngang bằng css theo cách sau:

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

Hộp thoại của tôi chứa tiêu đề và nội dung div. Toàn bộ hộp thoại sẽ được kéo xung quanh bằng cách kéo tiêu đề. Vì vậy, tôi sử dụng jQuery-UI .draggable() phụ tùng như thế này:

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

Vấn đề là: kéo hộp thoại xung quanh công trình nhưng không phải là cách thức mà nó được thiết kế để. Theo chiều dọc hộp thoại sau con chuột hoàn hảo nhưng chiều ngang nó sau chuột quá chậm do đó có thể rời khỏi hộp thoại khi kéo xung quanh (ví dụ bấm vào tiêu đề trên rất đúng và kéo hộp thoại bên phải). Điều thú vị là: Xóa "lề: tự động;" khắc phục sự cố nhưng phần tử không được căn giữa nữa. Định tâm div với javascript là không có tùy chọn. Bạn có ý tưởng nào về cách khắc phục sự cố đó không?

Answer 1

Nếu thoại của bạn có chiều rộng cố định, hãy thử

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

DEMO

Answer 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; 
}