एक दूसरे पर गिरने से आकार बदलने योग्य और खींचने योग्य तत्वों को कैसे रोकें?

हे सब। मैं निम्नलिखित कोड है:एक दूसरे पर गिरने से आकार बदलने योग्य और खींचने योग्य तत्वों को कैसे रोकें?

जैसा कि आप देख सकते हैं, वहाँ 2 सरल DIVs कि एक दूसरे के ऊपर एक खड़ी दिखती हैं कर रहे हैं। इनमें से प्रत्येक डीवी भी आकार बदलने योग्य और खींचने योग्य होने के लिए सेट हैं। हालांकि, ध्यान दें कि जब आप पहले तत्व का आकार बदलने का प्रयास करते हैं, तो दूसरा तत्व पहले पर गिर जाता है। जो मैं देख सकता हूं, उससे यह इसलिए है क्योंकि आकार बदलने योग्य तत्व को पूर्ण स्थिति में बदल देता है। मैं इस व्यवहार को कैसे रोक सकता हूं? तत्व को खींचने की क्षमता को बनाए रखने के दौरान तत्व का आकार बदलना संभव है?

ध्यान दें, कि यदि आप तत्वों को प्रतिबिंबित करने की स्थिति रखते हैं (स्थिति जोड़ें: रिश्तेदार! डीमो शैली में महत्वपूर्ण), तो यह प्रकार गिरने से रोकता है, लेकिन जब आप शुरू करते हैं तो तत्व "कूदता है" आकार बदलें या खींचें। एक और अजीब व्यवहार। आपकी सहायता के लिए धन्यवाद.

स्रोत

2011-05-17 naivedeveloper

मेरी विशिष्ट मामले में, यहाँ क्या मैं इसे ठीक करने के लिए किया था:

resizeableObj.resizable({ 
    start: function(event, ui) {   
     resizeableObj.css({ 
      position: "relative !important", 
      top: "0 !important", 
      left: "0 !important" 
     }); 
    }, 
    stop: function(event, ui) { 
     resizeableObj.css({ 
      position: "", 
      top: "", 
      left: "" 
     }); 
    } 
});

आप देख सकते हैं, आकार बदलने योग्य शुरू घटना में, सापेक्ष स्थिति (करने के लिए खींचने योग्य और संगीत कार्यक्रम में पुनः आकार देने योग्य का उपयोग करके सेट , एक पूर्ण स्थिति जोड़ दी जाती है) और कभी-कभी "कूदने" को रोकने के लिए शीर्ष पर सेट करें और 0 से बाएं। स्टॉप इवेंट में, इन बदलावों को उलट दें। मेरे मामले में काम करता है, वाईएमएमवी।

स्रोत

2011-06-01 16:48:29 naivedeveloper

एर ... आप jQuery सीएसएस फ़ंक्शन में महत्वपूर्ण नहीं जोड़ सकते! कामकाज के रूप में, शुरुआत में एक कक्षा जोड़ें जिसमें इन सीएसएस नियमों के साथ महत्वपूर्ण है, और इसे रोकने पर हटा दें। – Jide

बस # कंटेनर को position: relative; पर सेट करें। http://jsfiddle.net/g7Cgg/1/

स्रोत

2011-05-17 21:57:40 Zlatev

कोशिश की। कोई भाग्य नहीं। आकार बदलने का प्रयास करते समय निचला तत्व अभी भी ऊपरी तत्व पर गिर जाता है। – naivedeveloper

यदि आपके लिए निश्चित ऊंचाई काम करता है तो http://jsfiddle.net/g7Cgg/4/ – Zlatev

यह समझ में आता है कि यह क्यों गिरता है ... मेरा मतलब है, आप जहां चाहें तत्व को स्थान देने में सक्षम होने के लिए, इसे करना है पूर्ण स्थिति का उपयोग करें, इस प्रकार इसे प्रवाह से बाहर ले जाएं। मैं सिर्फ उत्सुक हूं कि इस उदाहरण में आकार बदलने योग्य और खींचने योग्य का उपयोग करने का कोई तरीका है। – naivedeveloper

क्रोम डेवलपर टूल्स इंगित करता है कि उपयोगकर्ता यूआई ड्रैग/आकार बदलने के दौरान style="position:relative" विशेषता का उपयोग करता है। यह सीएसएस में किसी भी .demo{position:absolute} को ओवरराइड करेगा।

कामकाज अपना खुद का style="position:absolute" सेट करना है (आप इसके लिए jQuery css() विधि का उपयोग कर सकते हैं) तो प्रत्येक div के लिए स्पष्ट रूप से ऊपर और बाएं सेट करें।

$('.demo').css({position:"absolute"});

स्रोत

2012-03-29 23:23:47 kippsoftware

एक आसान समाधान मिला (जो मेरी आवश्यकताओं के अनुरूप है); !

अंदर jQuery-ui.css, बनाने के लिए इच्छित स्थान निर्धारित करने और जोड़ने के महत्वपूर्ण यकीन है कि यह रहता है:

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */

स्रोत

2014-04-28 09:14:52

इस कोड का प्रयोग करें, जबकि खींच स्क्रॉल किए बिना खिड़की अंतरिक्ष के भीतर तत्व रखने के लिए:

$("#draggable").draggable({containment:"window", scroll: false})

स्रोत

2017-11-10 10:22:44

एक दूसरे पर गिरने से आकार बदलने योग्य और खींचने योग्य तत्वों को कैसे रोकें?

उत्तर

संबंधित मुद्दे