jQuery सॉर्ट करने योग्य सूचियों को ओवरलैप करने से निपटने

यह एक अस्पष्ट समस्या है, लेकिन मैं jQuery सॉर्टेबल का उपयोग कर रहा हूं और fixed के रूप में स्थित होने पर दो कनेक्ट सूचियों को अच्छी तरह से काम करने की कोशिश कर रहा हूं। जब तक आप पेज को स्क्रॉल नहीं करते हैं, तब तक यह सब ठीक काम करता है जैसे कि दो सूचियां एक दूसरे के शीर्ष पर स्थित होती हैं। तब सूचियों को उलझन में लग रहा है कि किसके पास ड्रैग किया जा रहा आइटम प्राप्त करना चाहिए, जिसका अर्थ है कि आपको झटके का गुच्छा मिल रहा है क्योंकि यह प्रत्येक सूची में दिखाई देता है/गायब हो जाता है।jQuery सॉर्ट करने योग्य सूचियों को ओवरलैप करने से निपटने

यह मुद्दा की तरह लग रहा है कि दोनों सूचियों माउस/प्रकार की घटनाओं संभाल रहे हैं के बाद से आइटम घसीटा जा रहा है दोनों सूचियों से अधिक तकनीकी रूप से है, लेकिन है कि मैं क्या चाहता हूँ ओवरले सूची के लिए (यानी position: fixed एक) निगल घटनाओं है ताकि अंतर्निहित मुख्य सूची आइटम प्राप्त करने का प्रयास न करे।

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
    <style type="text/css"> 
     ul { list-style-type: none; padding: 0; float: left; } 
     li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; } 
     #overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; } 
     #overlayed li { width: 50px; float: left; } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection(); 
     }); 
    </script> 
</head> 
<body> 
<div id="overlayed"> 
    <ul> 
     <li>Item X</li> 
     <li>Item Y</li> 
     <li>Item Z</li> 
    </ul> 
</div> 
<br/><br/><br/><br/><br/> 
<ul> 
    <li>Item 01</li> 
    <li>Item 02</li> 
    <li>Item 03</li> 
    <li>Item 04</li> 
    <li>Item 05</li> 
    <li>Item 06</li> 
    <li>Item 07</li> 
    <li>Item 08</li> 
    <li>Item 09</li> 
    <li>Item 10</li> 
    <li>Item 11</li> 
    <li>Item 12</li> 
    <li>Item 13</li> 
    <li>Item 14</li> 
    <li>Item 15</li> 
    <li>Item 16</li> 
    <li>Item 17</li> 
    <li>Item 18</li> 
    <li>Item 19</li> 
    <li>Item 20</li> 
    <li>Item 21</li> 
    <li>Item 22</li> 
    <li>Item 23</li> 
    <li>Item 24</li> 
    <li>Item 25</li> 
    <li>Item 26</li> 
    <li>Item 27</li> 
    <li>Item 28</li> 
    <li>Item 29</li> 
    <li>Item 30</li> 
</ul> 
</body> 
</html>

तो सवाल है, मैं इसे कैसे ठीक करूं:

यहाँ कम से कम कोड उदाहरण है?

स्रोत

2010-11-04 Alconja

लाइब्रेरी कोड में कूदें, पता लगाएं कि आप वास्तव में किस फ़ंक्शन का उपयोग कर रहे हैं, तो आप अपनी समस्या का समाधान करने में सक्षम होना चाहिए। – aaaaaaaaaaaa

मैंने sortable कार्यक्षमता को fixedSortable बनाने के लिए निर्मित इस समस्या को ठीक करने के लिए समाप्त किया है जो पता चलता है और चयन में ओवरले होने पर सूचियों पर होवरिंग को चुनिंदा रूप से अनदेखा करता है। मेरे उद्देश्यों के लिए, मैंने नियमों को कड़ी मेहनत की है, क्योंकि यह मेरी जरूरतों/समय की बाधाओं के अनुकूल है, लेकिन आप इसे बहुत अधिक प्रयास किए बिना पूरी तरह से सामान्य बनाने में सक्षम होना चाहिए।

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
    <style type="text/css"> 
     ul { list-style-type: none; padding: 0; float: left; } 
     li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; } 
     #overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; } 
     #overlayed li { width: 50px; float: left; } 
    </style> 
    <script type="text/javascript"> 
     (function ($, undefined) { 
      $.widget("ui.fixedSortable", $.ui.sortable, { 
       _init: function() { 
        this.element.data("sortable", this.element.data("fixedSortable")); 
        return $.ui.sortable.prototype._init.apply(this, arguments); 
       }, 
       _create:function() { 
        var result = $.ui.sortable.prototype._create.apply(this, arguments); 
        this.containerCache.sortable = this; 
        return result; 
       }, 
       _intersectsWithPointer: function (item) { 
//This line.... 
        if (item.instance.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) { 
         return false; 
        } 
        return $.ui.sortable.prototype._intersectsWithPointer.apply(this, arguments); 
       }, 
       _intersectsWith: function(containerCache) { 
//Also this line.... 
        if (containerCache.sortable.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) { 
         return false; 
        } 
        return $.ui.sortable.prototype._intersectsWith.apply(this, arguments); 
       } 
      }); 
     })(jQuery); 

     $(function() { 
      $("ul").fixedSortable({ connectWith: "ul", opacity: 0.6 }).disableSelection(); 
     }); 
    </script> 
</head> 
<body> 
<div id="overlayed"> 
    <ul> 
     <li>Item X</li> 
     <li>Item Y</li> 
     <li>Item Z</li> 
    </ul> 
</div> 
<br/><br/><br/><br/><br/> 
<ul class="main-list" > 
    <li>Item 01</li> 
    <li>Item 02</li> 
    <li>Item 03</li> 
    <li>Item 04</li> 
    <li>Item 05</li> 
    <li>Item 06</li> 
    <li>Item 07</li> 
    <li>Item 08</li> 
    <li>Item 09</li> 
    <li>Item 10</li> 
    <li>Item 11</li> 
    <li>Item 12</li> 
    <li>Item 13</li> 
    <li>Item 14</li> 
    <li>Item 15</li> 
    <li>Item 16</li> 
    <li>Item 17</li> 
    <li>Item 18</li> 
    <li>Item 19</li> 
    <li>Item 20</li> 
    <li>Item 21</li> 
    <li>Item 22</li> 
    <li>Item 23</li> 
    <li>Item 24</li> 
    <li>Item 25</li> 
    <li>Item 26</li> 
    <li>Item 27</li> 
    <li>Item 28</li> 
    <li>Item 29</li> 
    <li>Item 30</li> 
</ul> 
</body> 
</html>

अपने आप को इस अनुकूल हैं, तो आप को बदलने के लिए दो टिप्पणी की लाइनों के ऊपर चिह्नित की आवश्यकता होगी:

सबसे पहले यहाँ कोड (नीचे विवरण) है। मूल रूप से यदि बयानों को सही (और इस प्रकार झूठी वापसी) का मूल्यांकन करना चाहिए (यदि item.instance.element और containerCache.sortable.element) ओवरले और ईवेंट (this) ओवरले की सीमाओं के भीतर हो रहा है। इस तरह मुख्य सूची पृष्ठ के स्थान पर घटनाओं को कभी प्राप्त नहीं करती है जहां ओवरले है। तो इस कोड में मुख्य सूची किसी भी घटना को प्राप्त नहीं करती है यदि वे स्क्रीन के शीर्ष 87 पिक्सेल में होते हैं, क्योंकि वह जगह है जहां मेरा निश्चित ओवरले था (जो इस गूढ़ उदाहरण में बिल्कुल सटीक नहीं है, लेकिन उम्मीद है कि यह अभी भी समझ में आता है)।

स्रोत

2010-12-07 00:46:46 Alconja

यह नहीं पता कि यह किसी के लिए उपयोगी है, लेकिन मैंने अल्कोन्जा के कोड जेएसबीन में गिरा दिया ताकि आप इसे काम कर सकें। http://jsbin.com/iqemid/2 इस कोड के लिए Alconja के लिए सभी धन्यवाद ^^ – azzy81

इस बग मुझे लगता है कि आप का सामना कर रहे है, और ठीक एक बहुत सरल है:

http://bugs.jqueryui.com/ticket/7065

स्रोत

2011-11-18 18:04:31 Jason

मुझे लगता है कि यह वही बग है, लेकिन सुझाए गए फ़िक्स में सभी परिदृश्य शामिल नहीं हैं (ओपी द्वारा उल्लिखित एक सहित)। मुझे लगता है कि असली फिक्स को कर्सर के नीचे सभी ड्रॉपटेबल कंटेनर के स्टैकिंग संदर्भ को निर्धारित करने और ज़ेड-ऑर्डर के मामले में शीर्षतम कंटेनर चुनने की आवश्यकता है। –

आह, शायद सच है। फिक्स केवल उन सूचियों को कवर करता है जो अतिप्रवाह के कारण ओवरलैप होते हैं: छुपा, ज़ेड-ऑर्डर के कारण नहीं। ऐसा लगता है कि आपको उम्मीदवारों को ज़ेड-ऑर्डर से पहले क्रमबद्ध करने की आवश्यकता है और फिर जब तक आप हिट नहीं करते हैं तब तक उन्हें पार करें। – Jason

मैं एक पृष्ठ जहाँ मैं एक दूसरी सूची के ऊपर एक सूची खड़ी है पर इस समस्या का सामना किया । भले ही अतिप्रवाह छिपाने के लिए सेट किया गया हो, फिर भी शीर्ष सूची का अदृश्य ओवरफ़्लो अभी भी नीचे दी गई सूची के लिए ईवेंट पर कदम को अवरुद्ध कर रहा है (ओवरलैप को देखने में सहायता के लिए शीर्ष सूची में ऑटो पर ओवरफ़्लो सेट करके इसकी पुष्टि की जा सकती है)। यह एक जेड इंडेक्स मुद्दा है।

//expliclty hide the overflow items 
$('.topList .item:gt(5)').hide(); 
$('.topeList .item:first').show();

क्या मैं यहाँ कर रहा हूँ स्पष्ट रूप से शीर्ष सूची तत्व छिपा है, छोड़ने के केवल शीर्ष 5 दृश्यमान होता है ताकि कोई डोम है:

मेरे ठीक sortable बंद स्थिति में इस कोड डालने की थी ऊपर और नीचे सूची के बीच ऑफ़सेट ओवरलैप करें।

स्रोत

2012-05-10 19:17:30 zomf

मैंने जेड-इंडेक्स को खाते में लेने के लिए क्रमबद्ध करने के लिए परिवर्तन को लागू किया।

यहाँ मेरी कांटा देखें: https://github.com/david04/jquery-ui/commit/feaf94ebabacee4d11b5e98c412d795d68ca9d51 (कोड, काफी सरल परिवर्तन की 10 लाइनें)

आप जब sortable बुला विकल्प compareZIndex=true जोड़ने की आवश्यकता होगी।

स्रोत

2014-05-16 13:27:37

jQuery सॉर्ट करने योग्य सूचियों को ओवरलैप करने से निपटने

उत्तर

संबंधित मुद्दे