jQuery-UI draggable: div माउस का सही क्षैतिज

Question

का पालन नहीं करता है यहां एक छोटा demo है। मैं एक संवाद खींचने योग्य बनाना चाहता हूँ। यह सीएसएस के माध्यम से निम्न क्षैतिज केंद्रित है:

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

मेरे संवाद में एक शीर्षलेख और सामग्री div शामिल है। हेडर खींचकर पूरे संवाद को खींच लिया जाना है।

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

समस्या है: काम करता है चारों ओर संवाद नहीं लेकिन जिस तरह से यह करने का इरादा है खींच तो मैं इस तरह jQuery-यूआई .draggable() विजेट का इस्तेमाल किया। लंबवत संवाद माउस सही इस प्रकार है, लेकिन क्षैतिज यह माउस बहुत धीमी गति से इस प्रकार तो यह है, जबकि आसपास (उदाहरण के लिए बहुत सही पर शीर्ष लेख पर क्लिक करें और सही करने के लिए संवाद खींचें खींच संवाद छोड़ने के लिए संभव है)। दिलचस्प बात यह है: "मार्जिन: ऑटो;" को हटा रहा है समस्या को हल करता है लेकिन तत्व अब केंद्रित नहीं है। जावास्क्रिप्ट के साथ div को केंद्रित करना कोई विकल्प नहीं है। क्या आपके पास इस समस्या को ठीक करने के बारे में कोई विचार है?

Answer 1

अपने संवाद एक निश्चित चौड़ाई है, तो कोशिश

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