jquery-ui sortable: एकाधिक सॉर्टेबल का उपयोग करते समय पीछे खींचने वाले तत्व

Question

मेरे पास जेड-इंडेक्स के साथ कुछ अजीब व्यवहार प्रदर्शित करने वाले नेस्टेड सॉर्टेबल तत्वों की एक श्रृंखला है।

असल में, कुछ मौकों पर तत्वों को मूल कंटेनरों से व्यवहार करने के लिए खींचा जाता है। ऐसा लगता है कि मूल तत्व को सॉर्ट करने के बाद ही दिखाई देता है।

ऐसा लगता है कि पिछली समस्या केवल सूची के नीचे तत्वों पर है। इसलिए मैं एक "उच्च" क्रमबद्ध करने के लिए खींच सकता हूं, लेकिन "निचले" क्रमबद्ध करने के लिए खींच रहा हूं और ड्रैग तत्व अचानक पीछे है।

विवरण:

sortable सूची को देखते हुए एक बदल जाता है में एक में प्रत्येक तत्व

(प्रत्येक एक में बी सूचियों सभी जुड़े हुए हैं के रूप में) एक sortable सूची कनेक्ट बी शामिल

ए में तत्व को सॉर्ट करने के बाद, इस सूची में क्रमबद्ध रहने से निकाले गए तत्व अब अन्य तत्वों के पीछे हैं।

मैंने सीएसएस और जेक्विरी दोनों के माध्यम से विभिन्न जेड-इंडेक्स विकल्पों के साथ कोई फायदा नहीं हुआ है।

Answer 1

मुझे इस समस्या के लिए एक समाधान मिला।

जब आपके sortables को परिभाषित करने, का उपयोग करें:

appendTo: "body" 
helper: "clone" 

यह पूरी तरह नेस्ट sortable Z- क्रम से बाहर निकाल लिया तत्वों टूट जाता है और समस्या का हल।

Answer 2

मुझे पता है कि यह एक पुराना धागा है लेकिन मेरे पास थोड़ा अलग समाधान था। शरीर को लगाने के बाद मेरे तत्व ने इसके सभी सीएसएस गुण खो दिए। मेरा कामकाज मेरा खुद का कस्टम सहायक वस्तु बना रहा था।

जावास्क्रिप्ट:

appendTo: 'body',   
    helper: function(event, $item){ 
     var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>'); 
     return $helper; 
    }, 

सीएसएस

.styled li{ 
     margin-left: 0px; 
} 
.styled{ 
     cursor:move; 
     text-align:left; 
     margin-left: 0px; 
     padding: 5px; 
     font-size: 1.2em; 
     width: 390px; 
     border: 1px solid lightGrey; 
     background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat- 
     font-weight: normal; 
     color: #555; 
     list-style-type: none; 
} 

Answer 3

सुंदर देर से प्रतिक्रिया है, लेकिन किसी को भी, जो भविष्य में इस प्रकार के लिए मैं ने पाया है कि यदि आप एक से अधिक तत्वों आगे बढ़ रहे हैं, तो आप तरह ओवरराइड कर सकते हैं और तत्वों को z-index सेट करने के लिए फ़ंक्शन रोकें। उदाहरण के लिए:

sort: function(event, ui) { 
    $(this).css('z-index', 1000); 
}, 
stop: function(event, ui) { 
    $(this).css('z-index', 0); 
} 

यह वर्तमान तत्व की जेड-इंडेक्स संपत्ति को अद्यतन करेगा जो यह सुनिश्चित करता है कि यह हमेशा शीर्ष पर है। इसलिए आप समूह को तत्वों के लिए इस विचार का विस्तार कर सकते हैं। कल्पना कीजिए:

sort: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 1000); 
    }); 
}, 
stop: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 0); 
    }); 
}