jQuery UI sortable() का उपयोग कर एक तत्व को ड्रॉपडाउन सूची में कैसे खींच सकता हूं?

Question

लघु संस्करण: मैं इस डेमो में Link 3 के तहत ड्रॉपडाउन में से किसी एक में Link 1 कैसे खींच सकता हूं? http://jsfiddle.net/Gdadu/2/

संपादित: मुद्दा जब एक आइटम दूसरे पर घसीटा जाता है कि क्या होने चाहिए के बारे में लाया गया है: यह बाईं/सही करने के लिए रखा गया है या एक नया सबमेनू शुरू किया जाना चाहिए? सूची को पूरी तरह से क्रमबद्ध करने के लिए, नए ul ड्रॉपडाउन को शुरू करने से, आइटम को गैर-मौजूदा सबमेनस में ड्रॉप करने का कोई तरीका होना चाहिए। मैं प्रत्येक सूची आइटम में एक खाली ul डाल सकता हूं जिसमें अभी तक ड्रॉप लक्ष्य के रूप में कार्य करने के लिए कोई नहीं है, लेकिन ऊपर की समस्या अभी भी मौजूद है।

यह शुरू में मुझे लगता है कि यह बहुत कठिन लगता है, इसलिए मैं इसमें अभी तक अधिक प्रयास नहीं करने के लिए क्षमा चाहता हूं, क्योंकि मैंने इनमें से कुछ समस्याओं पर विचार नहीं किया था। मैं निर्दिष्ट मुद्दे का उत्तर स्वीकार करने के लिए तैयार हूं और बाद में बाकी के बारे में चिंता करता हूं।

---

मेरे पास jQuery UI का उपयोग करके एक मूल ड्रॉपडाउन नेविगेशन सूची है जिसे मैं पूरी तरह क्रमबद्ध करना चाहता हूं। कोई भी li तत्व पूरी सूची में किसी भी स्थिति में स्थानांतरित करने में सक्षम होना चाहिए। मुझे उपमेनस में शीर्ष स्तर की सूची आइटम खींचने में परेशानी हो रही है, ऐसा लगता है कि :hover "ड्रैग मोड" में ड्रॉपडाउन सूची पर ट्रिगर नहीं करता है, इसलिए ड्रॉपडाउन प्रकट नहीं होते हैं।

उदाहरण HTML:

<ul class="dropdown"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a> 
       <ul> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

मेरे सीएसएस:

.dropdown, 
.dropdown li, 
.dropdown ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
.dropdown { 
    position:relative; 
    display:block; 
    z-index:10000; 
} 
.dropdown ul { 
    position:absolute; 
    top:100%; 
    width:100%; 
    visibility:hidden; 
    display:none; 
    z-index:900; 
} 
.dropdown ul ul { 
    top:0; 
    left:100%; 
} 
.dropdown li { 
    position:relative; 
    float:left; 
} 
.dropdown li:hover{ 
    z-index:910; 
    cursor:default; 
} 
.dropdown ul:hover, 
.dropdown li:hover > ul, 
.dropdown a:hover + ul, 
.dropdown a:focus + ul { 
    visibility:visible; 
    display:block; 
} 
.dropdown a { 
    text-decoration:none; 
    display:block; 
    padding:.5em 2em; 
    background:#cde; 
    border:1px solid #ccc; 
} 
.dropdown ul li { 
    width:100%; 
} 

क्रमित करने योग्य प्रारंभ:

$('.dropdown').sortable({ 
    items: 'li' 
}); 

डेमो: http://jsfiddle.net/Gdadu/2/

उदाहरण के लिए, मैं डॉ करना चाहते हैं उपमेनू में एजी "लिंक 1", लेकिन ऐसा नहीं कर सकता क्योंकि उपमेनू ड्रैग करते समय प्रकट नहीं होता है, जैसे :hover को अनदेखा किया जाता है। मुझे यकीन नहीं है कि समस्या सीएसएस या जावास्क्रिप्ट में है या नहीं। इस बारे में क्या किया जा सकता है? टिप्पणियों से

अच्छा विचार है:

शायद आप जब एक खींचें

यह शायद काम करेगा शुरू होता है विस्तार करने के लिए सब कुछ को चालू कर सकते हैं, लेकिन मैं पूरे मेनू का विस्तार करने के लिए नहीं करना चाहती। यह कई लिंक और नेविगेशन के 3 स्तरों के साथ बहुत सारी सामग्री हो सकती है, और शायद सभी फ्लाईआउट/ड्रॉपडाउन (विशाल गड़बड़) के साथ खुद को ओवरलैप कर देगी।

Answer 1

यहाँ एक बेला कि कुछ बिंदुओं है कि आप अपने कार्यान्वयन के साथ मदद कर सकते हैं पता चलता है: http://jsfiddle.net/Gdadu/13/

यह सही से दूर है, और के रूप में टिप्पणी में बताया, वहाँ "छँटाई के साथ कुछ तार्किक समस्याओं को भी है सबकुछ सब कुछ ":) यहाँ काम नहीं कर रहे चीजें नेस्टेड ली की पीठ को शीर्ष स्तर पर क्रमबद्ध कर रही हैं, नेस्टेड उल के सॉर्टेबल, ... लेकिन मुझे लगता है कि वे वहां स्केच किए गए हैं। ड्रैगिंग से सॉर्टिंग को अलग करना jqueryui की वर्तमान स्थिति के साथ एक चीज जरूरी हो सकता है। इसके अलावा मैंने सबमेनस के लिए अपने उत्कृष्ट सीएसएस समाधान को छोटा कर दिया और उन्हें चीजों को सरल बनाने के लिए जावास्क्रिप्ट बनाया।

लेकिन: आप link3 या link3 के नेस्टेड उल अंदर link1 ड्रॉप कर सकते हैं;)