jquery सॉर्टेबल प्लेसहोल्डर ऊंचाई की समस्या

Question

किसी कारण से मेरी सॉर्ट करने योग्य वस्तुओं के लिए प्लेसहोल्डर लगभग 10px है। मेरी सभी छांटने वाली वस्तुओं की अलग-अलग ऊँचाइयाँ हैं। आइटम को स्थानांतरित करने के लिए मैं प्रत्येक प्लेसहोल्डर की ऊंचाई कैसे बदल सकता हूं?

Comments

क्या आप इसे jsFiddle को पोस्ट कर सकते हैं?

— सतीश

क्या ऐसा तब हुआ है जब आप अपने आइटम को दूसरी जगह खींचते और गिराते हैं? या आइटम पहले से ही पृष्ठ लोड करने के बाद इस ऊंचाई है? वैसे भी यहाँ एक नज़र डालें: Bugs.jqueryui.com/ticket/4482 और उल्लेख के अनुसार वर्कअराउंड करने की कोशिश करें

— मोहम्मद

Answer 1

मैं आम तौर पर कॉलबैक बाइंड करके इसे हल करता हूं जो प्लेसहोल्डर की ऊंचाई को उस आइटम की ऊंचाई पर सेट करता है जिसे startइवेंट में सॉर्ट किया जा रहा है । यह एक सरल उपाय है जो आपको ठीक-ठाक नियंत्रण देता है कि आप अपने प्लेसहोल्डर को कैसे प्रदर्शित करना चाहते हैं।

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

देखें अपडेटेड टेस्ट केस

Comments

मुझे व्यक्तिगत रूप से ui.item.height () को ui.helper.outerHeight () को हाशिये के साथ कुछ मुद्दों के कारण बदलना पड़ा और तत्व की वास्तविक ऊंचाई को कम करने के लिए

— oshikryu

क्षमा करें, लेकिन मुझे नहीं लगता कि यह अच्छी तरह से काम करता है, इस लिंक में jsfiddle.net/t8gcZ/1 , प्लेसहोल्डर की ऊँचाई आइटम की ऊँचाई (237px) के बराबर है, लेकिन शुरू के समय में, हम देख सकते हैं कि अंडर आइटम एक कूड़े को ऊपर ले जाता है

— Makio

@Makio यह पेडिंग-बॉटम की वजह से है। प्लेसहोल्डर में पैडिंग-बॉटम जोड़ने से यह हल हो जाता है। jsfiddle.net/t8gcZ/136

— mekwall

Answer 2

क्या आपने forcePlaceholderSize:trueसंपत्ति सेट करने की कोशिश की है? JQuery के यूआई छाँटे जाने योग्य प्रलेखन पृष्ठ पर पढ़ें ।

Comments

मैंने कोशिश की है कि, लेकिन सही या गलत को जोड़ने से मेरी मूल साइट पर कोई फर्क नहीं पड़ता है जो इसे 10px तक रखता है। इस jsfiddle में, यह सही ढंग से आकार देता है, लेकिन सही या गलत के लिए सेट किए गए बल को कोई फर्क नहीं पड़ता है। jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: आप किस ब्राउज़र के तहत इसका परीक्षण कर रहे हैं?

— डार्थजेडीजी

@oshirowanen: क्या आप उस कोड का लिंक पोस्ट कर सकते हैं जहां वह वास्तव में टूटा हुआ है?

— डार्थजेडीजी

वह मेरे लिए काम करता है। मुझे बस इतना करना था कि CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }को बदल .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }दें (ताकि ऊँचाई हटा दें) तो @DarthJDG आप सही हैं!

— जेपी हेलिमोंस

@JPHellemons जो केवल तभी काम करता है जब ऊंचाई गतिशील न हो

— Erdal G.

Answer 3

क्या आपके तत्व हैं display: block? इनलाइन तत्व हो सकता है कि प्लेसहोल्डर ऊंचाई को सही ढंग से न रखे। उदाहरण के लिए। यह jsField आपके द्वारा बताई गई समस्या के समान है। जोड़ने display: blockके लिए .portletवर्ग फिक्स यह।

Comments

वही तैरने वाले तत्वों के लिए जाता है। यदि सूची तत्व तैर रहे हैं, तो प्लेसहोल्डर को भी तैरना चाहिए।

— एड्रियन मारिनिका

Answer 4

"Ui.item.height ()" का उपयोग करने के बजाय आप "ui.helper [0] .scrollHeight" का उपयोग स्थिर परिणाम के लिए कर सकते हैं जब बाहरी कंटेनर से कोई आइटम खींचें।

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

Answer 5

आप अपने प्लेसहोल्डर के लिए अपने सॉर्ट करने के लिए एक विकल्प के रूप में एक शैली निर्धारित कर सकते हैं।

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

और बस उस स्टाइल को एक ऊंचाई दें। आशा है कि काम करता है।

Comments

लेकिन वह ऊंचाई तय नहीं करेगा? मुझे सामग्री के समान ही हाइट चाहिए।

— जोशीवरन

Answer 6

मेरे मामले में, मुझे जेपी हेल्लेमन्स के समान समाधान मिला , जिसमें मैं कस्टम के लिए प्लेसहोल्डर की ऊंचाई ( महत्वपूर्ण ) के लिए मजबूर कर रहा हूं और अपने लिए बदलाव देखने के लिए पृष्ठभूमि के साथ दृश्यता भी सेट कर रहा हूं (आप इस तरह से अपने प्लेसहोल्डर को किसी भी तरह से स्टाइल कर सकते हैं जो आप चाहते हैं )।

यह भी साथ काम करता है display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px