jQuery UI सॉर्ट करने योग्य ड्रैग दीक्षा धीमी है जब कंटेनर छिपा हुआ आइटम

Question

मेरे पास एक असाधारण 'स्रोत' सूची है जिसमें लगभग 1,000 सूची आइटम हो सकते हैं। मैं स्रोत सूची से आइटम्स को एक कनेक्टेड 'गंतव्य' सूची में खींचने में सक्षम होना चाहता हूं। जब तक मेरी स्रोत सूची फ़िल्टर नहीं हो जाती तब तक मेरे पास सबकुछ बढ़िया काम करता है। मैं अपनी स्रोत सूची फ़िल्टर (खोज) फ़िल्टर करने के लिए jquery quicksearch प्लगइन का उपयोग कर रहा हूँ। फिल्टर 'प्रदर्शन: कोई नहीं;' सेट करके पूरा किया जाता है उन वस्तुओं पर जो खोज से मेल नहीं खाते हैं।

जब 1. मेरी स्रोत सूची में आइटम छुपाए जाते हैं, तब शुरू होने पर ड्रैग ऑपरेशन द्रव नहीं होता है। मतलब, मैं उस आइटम पर क्लिक करता हूं जिसे मैं खींचना चाहता हूं, स्क्रीन के चारों ओर अपने माउस को ले जाएं, लेकिन जिस आइटम को मैं ड्रैग कर रहा हूं वह ड्रैग शुरू करने के बाद पूर्ण कर्सर तक मेरे कर्सर के नीचे दिखाई नहीं देता है।

निदान के लिए, मैंने अपने उपयोग मामले को केवल एक सूची में घटा दिया है जिसे मैं सॉर्ट करना चाहता हूं। मैंने छुपा के रूप में मेरी सूची वस्तुओं के आधे भाग को कड़ी मेहनत करके त्वरित खोज के उपयोग को पूरी तरह समाप्त कर दिया है। मैं अभी भी 'गैर तरल पदार्थ' व्यवहार को पुन: पेश करने में सक्षम हूं। मेरे उदाहरण यहाँ है:

http://pastebin.com/g0mVE6sc

अगर मैं अपने उदाहरण में सूची से अतिप्रवाह शैली निकालने के लिए, प्रदर्शन थोड़ा बेहतर है, लेकिन अभी धीमी गति से मैं देखने की उम्मीद होता है।

क्या किसी अन्य विकल्प पर विचार करना शुरू करने से पहले मेरे पास कोई सुझाव है?

अग्रिम धन्यवाद।

Answer 1

आप इस jsferf उदाहरण पर देख सकते हैं, की गणना outerWidth()/outerHeight() (यह क्या प्लगइन करता है - नीचे देखें) छिपा तत्वों के लिए (प्रदर्शन से कोई भी साथ) दिखाई तत्वों के लिए की तुलना में बहुत धीमी है, गीला यह एक शैली विशेषता या एक वर्ग द्वारा हासिल किया जाता है।

एक ही रास्ता है कि मैं इस बायपास करने के लिए और अभी भी वही परिणाम प्राप्त पाया है तत्व के बजाय प्रदर्शन संपत्ति के साथ काम करने का, शून्य को छिपाने के लिए, शैली atttibute या एक वर्ग का उपयोग कर कि क्या ऊंचाई निर्धारित करने के लिए है :

<li style="height: 0;">b</li> 
<li class="hidden">b</li> 

.hidden { height: 0 } 

DEMO (with class) - DEMO (with style attr)

---

किसी तत्व को खींचते समय सॉर्ट करने योग्य के साथ खुशी क्या है?

खींचने शुरू करते समय, प्लगइन सभी वस्तुओं की सूची को रीफ्रेश करता है और सभी तत्वों की स्थिति को पुन: गणना करता है। प्लगइन वास्तव में हो जाता है outerWidth और outerHeight:

_mouseStart: function(event, overrideHandle, noActivation) { 
    ... 
    //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture 
    this.refreshPositions(); 
    ... 
} 

refreshPositions: function(fast) { 
    ... 
    for (var i = this.items.length - 1; i >= 0; i--) { 
     var item = this.items[i]; 
     ... 
     if (!fast) { 
      item.width = t.outerWidth(); 
      item.height = t.outerHeight(); 
     } 
     var p = t.offset(); 
     item.left = p.left; 
     item.top = p.top; 
    }; 
    ... 
    return this; 
},​ 

Answer 2

आप अभी भी उपयोग करने के लिए प्रदर्शन करना चाहते हैं: कोई नहीं, इस jQuery यूआई स्रोत डिडिएर के जवाब में निर्दिष्ट करने के लिए उन्हें आसानी से ठीक है:

if (!fast) { 
    if(item.item.css('display') === 'none') { 
     item.width = 0; 
     item.height = 0; 
    } 
    else { 
     item.width = t.outerWidth(); 
     item.height = t.outerHeight(); 
    } 
} 

यह मेरा स्टैक ओवरफ्लो पर बहुत पहले पोस्ट, तो अगर मुझे कुछ गड़बड़ हो तो मुझे बताएं।

Answer 3

मुझे भी इसी तरह की समस्या थी, लेकिन छिपी हुई वस्तुओं के बजाय छुपा ड्रॉप कंटेनर के साथ।यहां मेरा समाधान जॉर्डन का जवाब क्रमबद्ध वस्तुओं और उनके कंटेनर दोनों को लागू करने और बस रिलांट विधि को बदलने का है।

$.ui.sortable.prototype.refreshPositions = function(fast) { 
    //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change 
    if(this.offsetParent && this.helper) { 
     this.offset.parent = this._getParentOffset(); 
    } 

    for (var i = this.items.length - 1; i >= 0; i--){ 
     var item = this.items[i]; 

     //We ignore calculating positions of all connected containers when we're not over them 
     if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) 
      continue; 

     var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item; 

     if (!fast) { 
      /********** MODIFICATION ***********/ 

      if(item.item.css('display') === 'none') { 
       item.width = 0; 
       item.height = 0;      
      } else { 
       item.width = t.outerWidth(); 
       item.height = t.outerHeight(); 
      } 

      /********** END MODIFICATION ***********/ 
     } 

     var p = t.offset(); 
     item.left = p.left; 
     item.top = p.top; 
    }; 

    if(this.options.custom && this.options.custom.refreshContainers) { 
     this.options.custom.refreshContainers.call(this); 
    } else { 
     for (var i = this.containers.length - 1; i >= 0; i--){ 

      /********** MODIFICATION ***********/ 

      if (this.containers[i].element.css('display') == 'none') { 
       this.containers[i].containerCache.left = 0; 
       this.containers[i].containerCache.top = 0; 
       this.containers[i].containerCache.width = 0; 
       this.containers[i].containerCache.height = 0; 
      } else { 
       var p = this.containers[i].element.offset(); 
       this.containers[i].containerCache.left = p.left; 
       this.containers[i].containerCache.top = p.top; 
       this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); 
       this.containers[i].containerCache.height = this.containers[i].element.outerHeight(); 
      } 

      /********** END MODIFICATION ***********/ 
     }; 
    } 

    return this; 
}; 

Answer 4

मैं एक ही समस्या के साथ भर में आया ... मैं एक समाधान के लिए खोज की है, लेकिन ऐसा लगता है jQuery समस्या का कोई समाधान है, केवल कुछ वैकल्पिक हल ... मैं नहीं मिला था है या तो एक समाधान, बस एक और कामकाज।

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

इस तरह से मैं छिपा तत्वों :)

क्षमा साथ समस्या नहीं है यह कोई समाधान था, लेकिन सिर्फ एक और वैकल्पिक हल ..

सादर

Answer 5

अभी हाल ही में मैं करवाते हैं इस मुद्दे के साथ फिर से आ गया ... और पाया कि मेरी वैकल्पिक हल का सबसे अच्छा समाधान अब और नहीं था। के बाद से इस मुद्दे को ऊंचाई है ... मैं सिर्फ

.hidden {display: block; line-height:0; height: 0; overflow: hidden; padding: 0; margin: 0; }

साथ एक CSS वर्ग बनाने की है और बजाय तत्व के साथ छिपा हुआ स्थापित करने की सिर्फ इस वर्ग जोड़ सकते हैं और दिखाने/तत्व को छिपाने के लिए इसे हटाने के ..

सादर, एपी