JqueryUI, बड़ी तालिका

Question

युक्त स्क्रॉलिंग ड्रॉपपेबल div की कोशिकाओं में तत्व खींचें, मुझे ड्रैग/ड्रॉप समस्या का सामना करना पड़ रहा है।

मैं हमेशा उस तत्व को देखना चाहता हूं जो खींच रहा है, और मैं अपनी तालिका के किसी भी सेल में तत्व को छोड़ने के लिए एक विशिष्ट div को स्क्रॉल करने में सक्षम होना चाहता हूं। मैं किसी भी div से किसी भी div में तत्व खींचने में सक्षम होना चाहता हूं।

यह उदाहरण लगभग ठीक काम करता है। मेरी आखिरी समस्या सेल hoverClass संपत्ति के बारे में है: जब मैं "कंटेनर बी" की सीमा के पास "कंटेनर ए" से एक तत्व खींच रहा हूं, तो मैंने किसी भी सेल तक पहुंचने के लिए अपनी तालिका में नेविगेट करने के लिए एक ऑटो-स्क्रॉल व्यवहार लागू किया। लेकिन, स्क्रॉल सिमुलेशन के बाद, hoverClass सही सेल पर लागू नहीं होता है। हालांकि, तत्व हमेशा सही सेल में गिरा दिया जाता है।

https://jsfiddle.net/Bouillou/QvRjL/434/

मेरे दृष्टिकोण सही है?

संपादित

मैं एक वैकल्पिक हल मिल गया। विचार सहायक क्लोन को सहायक निर्माण कॉलबैक के दौरान स्क्रोल करने योग्य कंटेनर में जोड़ना है, फिर 1ms के बाद सेटटाइमआउट फ़ंक्शन का उपयोग करके शरीर में सहायक को जोड़ना। ऑफ़सेट समस्या से बचने के लिए सहायक स्थिति को माउस स्थिति पर मैप किया जाना चाहिए। https://jsfiddle.net/Bouillou/QvRjL/434/

मुझे यकीन है कि यह एक सबसे अच्छा तरीका है कि ऐसा करने के लिए विकसित करने के लिए संभव है हूँ:

यहाँ मेरा अंतिम समाधान है।

Answer 1

स्पष्ट रूप से मेरा अपडेट एकमात्र समाधान है।

यह बिना किसी समस्या के महीनों के लिए काम कर रहा है।

मुझे एक कामकाज मिला। विचार तत्व क्लोन को सहायक निर्माण कॉलबैक के दौरान स्क्रोल करने योग्य कंटेनर में जोड़ना है, फिर 1ms के बाद सेटटाइमआउट फ़ंक्शन का उपयोग करके शरीर में सहायक को जोड़ना। ऑफ़सेट समस्या से बचने के लिए सहायक स्थिति को माउस स्थिति पर मैप किया जाना चाहिए।http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

अगर मैं सही ढंग से समझने के, आप स्क्रॉल के बाद, highlitedcells सही नहीं है ..

मुझे लगता है कि यह सेल calcualtes अपने कंटेनर तत्व से उजागर करने के लिए लेकिन फिर तालिका तत्व के अंदर डी स्थिति को दोहराने।

बेससीली, यह 'कंटेनर 2' से माउस के ऑफसेट की जांच करता है और फिर ऑफ़सेट पर सेल को हाइलाइट करता है लेकिन तालिका 'टी' स्थिति से।

ऑफ़सेट के बजाय मौका और उपयोग स्थिति लें। और http://api.jquery.com/offset/ पर उल्लेख किया है,

.offset() विधि हमें दस्तावेज़ के लिए एक तत्व रिश्तेदार की वर्तमान स्थिति को पुनः प्राप्त करने की अनुमति देता है। इसे .position(), के साथ तुलना करें जो ऑफसेट पैरेंट के सापेक्ष वर्तमान स्थिति को पुनर्प्राप्त करता है।

Personnaly मैं बस कोशिकाओं में एक सीएसएस कक्षा लागू करता हूं और सीएसएस का उपयोग करता हूं: होवर।/संपादित करें: यदि आपको ऐसा करने का एकमात्र कारण सेल को हाइलाइट करना है .. शायद आप कुछ अन्य सामान भी ट्रिगर करना चाहते हैं।