javascript - how to clean the css style of jquery-ui be added automatically when someone use ".draggable()" -
यह मेरा कोड है:
& lt; style type = "text / css" & gt ; # ड्रैगगेबल {चौड़ाई: 100px; ऊंचाई: 100 पिक्सेल; पैडिंग: 0.5 एएम; बाईंओर तैरना; मार्जिन: 10px 10px 10px 0; सीमा: 1 पीएक्स ठोस # डीडीडीडीडीडी; रंग: # 333333; पृष्ठभूमि: # F2F2F2; } #droppable {width: 150px; ऊंचाई: 150px; पैडिंग: 0.5 एएम; बाईंओर तैरना; मार्जिन: 10 पीएक्स; सीमा: 1 पीएक्स ठोस # E78F08; रंग: #FFFFFF; फोंट की मोटाई: बोल्ड; पृष्ठभूमि: # F6A828; } # Droppable.highlight {पृष्ठभूमि: # FFE45C; } & Lt; / style & gt; & Lt; div वर्ग = "डेमो" शैली = "मार्जिन-बाएं: 35%; मार्जिन-टॉप: 10%; कर्सर: सूचक;" & gt; & Lt; div id = "draggable" & gt; & Lt; p & gt; मुझे मेरे लक्ष्य पर खींचें & lt; / p & gt; & Lt; / div & gt; & Lt; div id = "droppable" & gt; & Lt; p & gt; यहां ड्रॉप करें & lt; / p & gt; & Lt; / div & gt; & Lt; / div & gt; & lt;! - अंतिम डेमो - & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "jquery-1.4.2.min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "jquery-ui-1.8rc3.custom.min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; $ (फ़ंक्शन () {$ ("# draggable")। Draggable (); $ ("# droppable")। Droppable ({ड्रॉप: फ़ंक्शन (इवेंट, यूआई) {$ (this) .addClass ('हाइलाइट')। ('पी') एचटीएमएल ('गिरा दिया!'); $ (यह) खोजें। एपेंड (ui.draggable.draggable ("नष्ट"))}});}); मैं एक div को किसी और में खींचना चाहता हूं
और जब मैं रोकता हूं, तो यह दिखाता है:
यह ड्रापेबल डिवा में" प्रतीत "नहीं है,
क्योंकि ड्रैगेट करने योग्य डिवाइन ".draggable ()"
element.style {left: 133px; का उपयोग करते समय स्वचालित रूप से कुछ सीएसएस शैली जोड़ दी गई है। स्थिति: रिश्तेदार; शीर्ष: 38px; } मैं सीएसएस साफ़ कर सकता हूं, लेकिन क्या jquery-ui में यह करने की एक विधि है?
आप क्या पूरा करना चाहते हैं, यह बिल्कुल निश्चित नहीं है - थोड़ा और अधिक विवरण मदद मिलेगा लेकिन यह एक शॉट है ...
तो यहां एक उदाहरण है कि 'सम्मिलित' खींचें ।। ड्रॉप में - सीएसएस सहायक नहीं तत्व को लागू किया जाता है
$ ( "# खींचने योग्य") खींचने योग्य ({वापस लौटें: 'अमान्य', सहायक: 'क्लोन', zindex: 350, प्रारंभ: कार्य () {$ (यह)। टॉगल ();}, रोकें: फ़ंक्शन () {$ (यह)। टागले ();}}); $ ("# Droppable")। Droppable ({स्वीकार करें: '# ड्रैगएबल', ड्रॉप: फ़ंक्शन (इवेंट, यूआई) {$ (यह) .addClass ('हाइलाइट')। ('पी')। Html ('Dropped ! '); $ (Ui.draggable) .draggable ("नष्ट")। अनुलग्नक ($ (यह));}}); - संपादित करें - इसे थोड़ा गहरा में डुकार किया गया है, और इस कारण के कारण मेरे पोस्ट किए गए कोड प्रश्न के विपरीत काम करता है क्योंकि ड्रैगएबल में "सहायक: क्लोन" विकल्प है। जब एक सहायक प्रयोग किया जाता है, यह सहायक के लिए छोड़ दिया / शीर्ष सीएसएस लागू होता है, वास्तविक तत्व हम खींच कर रहे हैं करने के लिए नहीं।
आरंभ / खींचने योग्य में टॉगल रोक मूल तत्व गायब कर , लेकिन जब उसे गिरा दिया जाता है - $ () के डिफ़ॉल्ट दृश्य को अनुकरण करने के लिए इसे वापस चालू कर देता है। Draggable ()।
इसके अलावा, मैं आपके सीएसएस में आपके द्वारा दिए गए फ़्लोटों से सावधान रहना होगा - यह भी दे सकता है अजीब परिणाम।
Comments
Post a Comment