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