jQuery यूआई सॉर्ट करने योग्य - किसी कनेक्टेड सूची/कॉलम के नीचे तत्वों को खींचने में असमर्थ

Question

मुझे jQuery सॉर्टेबल के साथ कोई समस्या है। मैं इसे 3 कॉलम बनाकर iGoogle- जैसे डैशबोर्ड विकसित करने के लिए उपयोग कर रहा हूं। सभी 3 में क्रमबद्ध divs होते हैं और कनेक्टविथ विकल्प का उपयोग कर एक-दूसरे से जुड़े होते हैं।

मेरे पास जो समस्या है वह एक क्रमबद्ध कॉलम के नीचे एक div ड्रॉप करने का प्रयास कर रहा है; यह सिर्फ नहीं होना चाहता है। यह केवल तभी काम करता है जब मैं नीचे-नीचे div को खींचता/पीछे खींचता हूं जो पहले से ही सूची में है जिसे मैं खींच रहा हूं।

क्या इससे बचने का कोई तरीका है? या शायद प्रत्येक कॉलम के नीचे तय एक डमी div बनाने के लिए? इस संबंध में किसी भी सहायता प्रशंसनीय होगी!

अग्रिम धन्यवाद।

Answer 1

पुराना सवाल लेकिन शायद दूसरों की मदद करने ...

पैडिंग काम करता है, लेकिन अपने दृश्य उपचार बदल जाता है।

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

इसे अपने प्रारंभिकरण में जोड़ने का प्रयास करें (मेरे उदाहरण में मैं लंबवत सूची को क्रमबद्ध कर रहा हूं)।

 $(this.$el).sortable({ 
      axis: 'y', 
      cursor: 'move', 
      containment: 'parent', 
      tolerance: 'pointer' // this is the important bit 
     }); 

ऐसा करने के बाद यह बहुत ही आकर्षक होना चाहिए।

इसके अलावा आप यहां उस पर jQuery दस्तावेज़ नहीं देख सकते हैं:

Answer 2

divs वाले स्तंभों को नीचे div से परे खींचने योग्य क्षेत्र को विस्तारित करने के लिए एक उचित बड़े पैडिंग-तल की आवश्यकता होती है। अन्यथा, स्तंभ divs को कसकर गले लगाते हैं और प्रत्येक नीचे div के नीचे का क्षेत्र क्रमबद्ध सूची के बाहर स्थित है।