2009-07-27 17 views
21

के भीतर LI तत्वों को ले जाएं मेरे पास निम्न कोड है जो काम करता है हालांकि यह काफी धीमी गति से चलता है। मैं क्या करना चाहता हूं <li> को मौजूदा <ul> के तहत स्वतंत्र रूप से स्थानांतरित करने की अनुमति दें या उन्हें एक स्तर पर ले जाएं। मैं पदानुक्रम बनाने में भी सक्षम होना चाहता हूं ताकि अगर आपने <li> को <li> के तहत खींच लिया है जो पदानुक्रम बनाएगा। मुझे लगता है कि इस अर्थ में मुझे प्रत्येक <li> के तहत <ul> प्रस्तुत करना होगा। मैं केवल इसे 2 या 3 स्तरों तक सीमित करना चाहता हूं।jQuery नेस्टेड सॉर्ट करने योग्य - सभी उपलब्ध यूएल के

$("#sort_list").sortable({ 
    containment: 'parent',                      
    axis: 'y', 
    revert: true, 
    opacity: 0.8 
}); 
$(".sub_list").sortable({ 
    containment: 'parent', 
    axis: 'y', 
    revert: true, 
    opacity: 0.8, 
}); 
$("#sort_list").disableSelection(); 

<ul id="sort_list"> 
    <li>one</li> 
    <li>two 
    <ul class="sub_list"> 
    <li>sub one</li> 
    <li>sub two</li> 
    </ul> 
    </li> 
    <li>three</li> 
    <li>four</li> 
</ul> 

उत्तर

40

बहुत बढ़िया जवाब

https://github.com/ilikenwf/nestedSortable

मुझे खुशी है कि मैं यह पाया है हूँ। जेस्ट्री मेरे लिए बहुत भारी वजन था।

+3

थोड़ा देर हो चुकी है लेकिन मुझे लगता है कि यह हो सकता है! अच्छा लगता है! – Jon

+2

यह अब – Tom

+0

@Tom बनाए रखा नहीं है ऐसा लगता है कि किसी और ने विकास को संभाला है। – gorn

1

सबसे अधिक संभावना jQuery यूआई लाइब्रेरी की sortable कार्यक्षमता विन्यास नहीं है (यह बहुत मौलिक है, सूची एक स्तर गहरी छँटाई के लिए)। ड्रैग और ड्रॉप का समर्थन करने वाले पेड़ प्लग-इन में से एक का उपयोग करके आप बेहतर हो जाएंगे।

jQuery यूआई पेड़ विजेट in development है, लेकिन आप निम्न प्लग-इन में से एक का उपयोग कर सकते हैं:

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

+2

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

+0

क्या आपने jstree.com में ड्रैग/ड्रॉप समर्थन देखा था? ऐसा लगता है कि आपको इसकी आवश्यकता है। हालांकि उनके पास एक कामकाजी डेमो नहीं है। आपको इसे डाउनलोड करना होगा और इसे स्वयं कॉन्फ़िगर करना होगा। –

6

मैं का इस्तेमाल किया है JQuery Interface plugin कौन कौन से सेटअप करना आसान था और उस कार्य के लिए बहुत अच्छी तरह से काम किया था (demo देखें), लेकिन मुझे कुछ हल्का चाहिए और जिसके लिए अतिरिक्त प्लगइन्स की आवश्यकता नहीं है।

$("ul").sortable({ 
items: '> li', 
axis: 'y', 
update: function (e, ui) { 
    ... 
} 

यह आपको किसी भी "उल" (मैं सही ढंग से याद कर सकते हैं अगर) के तहत प्रकार "ली" दूँगी:

भी JQuery यूआई लाइब्रेरी की sortable तरह का अल्पविकसित आप अभी भी प्राप्त कर सकते हैं कि कार्यक्षमता है किसी भी तरह। हालांकि यह आपको "li" तत्वों को एक "उल" से दूसरे "उल" में स्थानांतरित करने नहीं देगा। यहां तक ​​कि यह करना संभव है (कॉन्फ़िगरेशन बदलना), मैंने पाया कि यह इतना स्थिर नहीं है और किसी भी तरह बोझिल है।

मैं एक साधारण समाधान के साथ आया: एक "ध्वज बटन", जो सॉर्टिंग को निष्क्रिय करता है और आगे बढ़ता सक्रिय करता है ... और यह एक आकर्षण की तरह काम करता है! आपको बस इतना करना है कि इसे आगे बढ़ाने के बाद "ली" पैरेंट आईडी को ट्रैक करना है।

मेरा 5 सेंट। यह करने के लिए

+0

उस कार्यक्षमता के लिए उदाहरण/स्रोत जिसका आप उल्लेख कर रहे हैं? – Eric

15

एक "घोंसला" jQuery प्लगइन। मैं क्या कर रहा हूँ के लिए बिल्कुल सही:

http://dbushell.com/2012/06/17/nestable-jquery-plugin/

enter image description here

+2

को प्रतिबिंबित करने के लिए पोस्ट संपादित किया है यह एक गर्न द्वारा पोस्ट किए गए एक से बेहतर है। बहुत अनुकूलन और बेकार ढंग से काम करता है। साझा करने के लिए धन्यवाद! – Dorian

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