एकाधिक स्कॉप्स के साथ JQuery UI खींचें/ड्रॉपपेबल?

Question

मैं ड्रैगगेबल्स के कई वर्गों को रखना चाहता हूं, प्रत्येक ड्रॉपपेल के वर्ग से संबंधित है। लेकिन इसके अलावा, मैं एक अलग "कचरा बिन" रखना चाहता हूं, जहां सभी ड्रैगगैबल्स को तब तक छोड़ा जा सकता है जब तक उनके लिए उपयुक्त ड्रॉपपेल नहीं मिल सके।

अब, इसे आसानी से स्वीकृति समारोह के साथ प्राप्त किया जा सकता है। हालांकि, मेरे पास 20 कक्षाएं हो सकती हैं, प्रत्येक में 30-40 ड्रैगगेबल्स/ड्रॉपपैबल्स होते हैं। इसलिए यदि मैं इसके लिए "स्वीकृति" फ़ंक्शन का उपयोग करता हूं, तो जिस क्षण मैं ड्रैगगेबल लेता हूं, मेरा क्रोम फ्रीज करता है क्योंकि यह स्क्रीन पर प्रत्येक ड्रॉपपेल के लिए परीक्षण चलाता है :(

यदि मैं 'स्कोप' का उपयोग करता हूं तो इसे हल किया जा सकता है। संपत्ति, क्योंकि यह कुछ अलग तरीके से उपयोग कर रहा है। हालांकि, जब मैं एक गुंजाइश का उपयोग करता हूं, तो मैं "अपशिष्ट बिन" अवधारणा को लागू नहीं कर सकता, क्योंकि इसमें केवल एक गुंजाइश हो सकती है!

क्या कोई रास्ता है इस समस्या को पार करने के लिए? ड्रैगगैबल्स को एक से अधिक गुंजाइश दें, या अपशिष्ट बिन को कई स्कोप दें? या शायद कुछ अन्य समाधान मैं नहीं सोच सकता?

Answer 1

आंतरिक रूप से jQuery UI जब भी आप प्रारंभ करते हैं तो निम्न कोड चलाएगा draggable डी को खींच रहा है etermine जो droppable एस draggable प्राप्त करने के लिए योग्य हैं।

var m = $.ui.ddmanager.droppables[t.options.scope] || []; 
var type = event ? event.type : null; // workaround for #2317 
var list = (t.currentItem || t.element).find(":data(droppable)").andSelf(); 

droppablesLoop: for (var i = 0; i < m.length; i++) { 

    if(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) continue; //No disabled and non-accepted 
    for (var j=0; j < list.length; j++) { if(list[j] == m[i].element[0]) { m[i].proportions.height = 0; continue droppablesLoop; } }; //Filter out elements in the current dragged item 
    m[i].visible = m[i].element.css("display") != "none"; if(!m[i].visible) continue;         //If the element is not visible, continue 

    if(type == "mousedown") m[i]._activate.call(m[i], event); //Activate the droppable if used directly from draggables 

    m[i].offset = m[i].element.offset(); 
    m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight }; 

} 

आप देख सकते हैं कोड गैर तुच्छ है और क्यों आप धीमी प्रदर्शन हर बार जब आप खींचना शुरू देख रहे हैं समझा जाएगा।

ध्यान देने योग्य एक बात यह है कि droppablesLoop में चेक की गई पहली चीज़ यह है कि droppable अक्षम है या नहीं।

इसलिए, प्रदर्शन बढ़ाने के लिए आप हमेशा उचित droppable विजेट्स को मैन्युअल रूप से अक्षम कर सकते हैं जो आपको उपरोक्त कोड ब्लॉक से तुरंत बाहर निकल देगा। आप draggable पर start ईवेंट का उपयोग कर ऐसा कर सकते हैं, जो पहले आग लगाएगा।

$('.draggable').draggable({ 
    start: function() { 
     $('.invalid-droppable-elements').droppable('option', 'disabled', true); 
    }, 
    stop: function() { 
     $('.invalid-droppable-elements').droppable('option', 'disabled', false); 
    } 
}); 

यह अनिवार्य रूप से आप accept/scope तर्क अपने आप को और प्रदर्शन प्रभाव अपने एल्गोरिथ्म पर निर्भर है को लागू करता है। हालांकि यह लागू करने के लिए बुरा नहीं होना चाहिए। प्लगइन्स जितना धीमा है उतना ही कारण है क्योंकि उन्हें विभिन्न स्थितियों के लिए बहुत कुछ संभालना पड़ता है।

jQuery यूआई अलग-अलग draggable/droppable तत्वों में एकाधिक स्कॉप्स जोड़ने का समर्थन नहीं करता है लेकिन आप उस कार्यक्षमता को स्वयं ही रोल कर सकते हैं।

मैंने इसे यहां दिखाने के लिए एक उदाहरण दिया - http://jsfiddle.net/tj_vantoll/TgQTP/1/।