एक jQuery ड्रॉपपैबल को एक क्रमबद्ध से आइटम स्वीकार करें जो कनेक्टविथ

Question

का उपयोग कर रहा है। मुझे एक क्रमबद्ध सूची मिली है जो connectWith का उपयोग कर रही है ताकि यह सुनिश्चित किया जा सके कि इसे केवल अपनी ही सूची में ही क्रमबद्ध किया जा सके।

अब मैं एक ड्रॉप करने योग्य ट्रैश तत्व बनाने की कोशिश कर रहा हूं जो किसी आइटम को सॉर्ट किए जाने पर व्यूपोर्ट के नीचे दिखाई देता है। यह तत्व सूचियों के संदर्भ के बाहर है और उस पर छोड़े गए किसी भी तत्व को हटा देता है। वांछित कार्यक्षमता एक एंड्रॉइड फोन के डेस्कटॉप से ​​एक शॉर्टकट हटाने के समान है, अगर आप इससे परिचित हैं।

समस्या यह है कि, हालांकि मेरा कचरा एक ड्रॉपपेल है जो '*' स्वीकार करता है, मेरे सॉर्टेबल को केवल connectWith अन्य '.dropZone' आइटम केवल बताया जाता है, जिसका अर्थ है कि मैं अपने किसी भी सॉर्ट करने योग्य तत्व को होवर नहीं कर सकता ट्रैश तत्व पर राज्य।

मैंने प्रत्येक क्रमबद्ध को start ईवेंट पर ड्रैग करने योग्य बनाने की कोशिश की है, लेकिन निश्चित रूप से मैं उस पलगाबल को सटीक पल पर खींच नहीं रहा हूं और इसलिए यह सक्रिय नहीं है। क्या दोनों आवश्यकताओं को पूरा करना संभव है या क्या मुझे कचरे का पता लगाने के लिए मैन्युअल रूप से होवर करना है?

Answer 1

कचरा बनाने के बारे में कैसे .dropZone भी कर सकते हैं? फिर आपको उचित drop ईवेंट मिलेगा, और आप ठीक से हटाने को संभाल सकते हैं।

कचरे को बनाने के दुष्प्रभाव हो सकते हैं, लेकिन मुझे लगता है कि उन्हें काम करना आसान होना चाहिए।

यदि यह आपकी आवश्यकताओं को पूरा नहीं करता है, तो क्या आप डेमो somewhere फेंक सकते हैं, इसलिए हम जानते हैं कि आपको अपनी संरचना को बरकरार रखने के लिए वास्तव में क्या करना होगा, जबकि आपको अभी भी आवश्यक कार्यक्षमता जोड़नी है?

Answer 2

चूंकि connectWith एक चयनकर्ता स्वीकार करता है, तो आप इसे एक चयनकर्ता प्रदान कर सकते हैं जो अन्य कनेक्ट की गई सूचियों और आपके कचरा दोनों का चयन कर सकता है।

$("#sortable1, #sortable2").sortable({ 
    connectWith: '.connectedSortable, #trash' 
}).disableSelection(); 

$("#trash").droppable({ 
    accept: ".connectedSortable li", 
    hoverClass: "ui-state-hover", 
    drop: function(ev, ui) { 
     ui.draggable.remove(); 
    } 
}); 

उदाहरण: http://jsfiddle.net/petersendidit/YDZJs/1/