मैं jQuery यूआई में एक दूसरे के लिए एकाधिक सॉर्ट करने योग्य सूचियों को कैसे जोड़ूं?

Question

मैं jQuery के लिए नया हूं, और मैं पूरी तरह से jQuery UI के sortable का उपयोग करने के साथ संघर्ष कर रहा हूं।

मैं वस्तुओं को समूहबद्ध करने और ऑर्डर करने के लिए एक पृष्ठ को एक साथ रखने की कोशिश कर रहा हूं।

मेरे पृष्ठ में समूहों की एक सूची है, और प्रत्येक समूह में आइटमों की एक सूची है। मैं उपयोगकर्ताओं को निम्नलिखित करने के लिए सक्षम होने के लिए अनुमति देना चाहते हैं: समूहों

पुन: व्यवस्थित करें

1. पुन: व्यवस्थित करें समूहों के भीतर आइटम
2. समूहों के बीच आइटम ले जाएं

पहली दो आवश्यकताओं में कोई समस्या नहीं है। मैं उन्हें ठीक तरह से हल करने में सक्षम हूं। समस्या तीसरी आवश्यकता के साथ आता है। मैं बस उन सूचियों को एक दूसरे से जोड़ नहीं सकता। कुछ कोड मदद कर सकते हैं। मार्कअप यहाँ है।

<ul id="groupsList" class="groupsList"> 
    <li id="group1" class="group">Group 1 
    <ul id="groupItems1" class="itemsList"> 
     <li id="item1-1" class="item">Item 1.1</li> 
     <li id="item1-2" class="item">Item 1.2</li> 
    </ul> 
    </li> 
    <li id="group2" class="group">Group 2 
    <ul id="groupItems2" class="itemsList"> 
     <li id="item2-1" class="item">Item 2.1</li> 
     <li id="item2-2" class="item">Item 2.2</li> 
    </ul> 
    </li> 
    <li id="group3" class="group">Group 3 
    <ul id="groupItems3" class="itemsList"> 
     <li id="item3-1" class="item">Item 3.1</li> 
     <li id="item3-2" class="item">Item 3.2</li> 
    </ul> 
    </li> 
</ul> 

मैं document ready function में $('#groupsList').sortable({}); और $('.itemsList').sortable({}); डालकर सूचियों को सॉर्ट करने में सक्षम था। मैंने इसे बनाने के लिए sortable के लिए connectWith विकल्प का उपयोग करने का प्रयास किया, लेकिन मैं शानदार रूप से विफल रहा। मैं क्या करना चाहता हूं प्रत्येक groupItemsX सूची प्रत्येक groupItemsX सूची से जुड़ी है लेकिन स्वयं ही है। मैं कैसे करूं?

---

मैं सोच रहा था कि मैं कम वहाँ वृत्तीय संदर्भ में किसी प्रकार का हो सकता है विशेष रूप से अपने आप को एक सूची कनेक्ट नहीं की जरूरत है। अनुमोदित, मैं एक्सेल के साथ काम नहीं कर रहा हूं, लेकिन ऐसा लगता है कि किसी तरह का कभी भी समाप्त होने वाला पुनरावृत्ति नहीं हो सकता है जो एक ढेर ओवरफ्लो या कुछ कारण बनता है। हम्म। पन के लिए खेद है। खुद की मदद नहीं कर सका

वैसे भी, मैं इस तरह कुछ करने के लिए कोशिश कर रहा था, और यह काम नहीं कर रहा था:

$('.groupsList').sortable(); // worked great 
$('.groupsList').each(function() { 
    $(this).sortable({ 
     connectWith: ['.groupsList':not('#'+ $(this).attr('id'))]; 
    }); 
}); 

मुझे यकीन है कि मैं पूरी तरह से वाक्य रचना वहाँ घायल किया है हूँ, और मुझे लगता है कि यही कारण है कि मैं था है पहली जगह में सवाल पूछने के लिए। क्या सूची के बाहर मौजूदा आइटम को फ़िल्टर करने के लिए यह भी आवश्यक या उपयोगी प्रदर्शन-वार है?

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

Answer 1

क्या आप connectWith के लिए उपयोग किए गए वाक्यविन्यास को शामिल कर सकते हैं? क्या आपने अन्य समूहों की सूची को ब्रैकेट के अंदर रखा था (भले ही यह एक चयनकर्ता है)? यही कारण है:

...sortable({connectWith:['.group'], ... } 

Answer 2

यह काम करना चाहिए:

$('#groupsList').sortable(); 
$('.itemsList').sortable({ 
    connectWith: $('.itemsList') 
}); 

Answer 3

$(function() { 
      $("#groupItems1, #groupItems2, #groupItems3").sortable({ 
       connectWith: ".itemsList" 
      }).disableSelection(); 
     }); 

यह आप के लिए सब ठीक हो जाएगा! मेरे लिए यहाँ वही कर रहा हूँ। आपके एचटीएमएल में कोई बदलाव आवश्यक नहीं है।