التعامل مع قوائم فرز jQuery المتداخلة

StackOverflow https://stackoverflow.com/questions/4092817

سؤال

هذه مشكلة غامضة قليلاً ، لكنني أستخدم jQuery Sortables وأحاول الحصول على قائمتين متصلتين يعملان معًا بشكل جيد عندما يتم وضع المرء كـ fixed. كل شيء يعمل بشكل جيد حتى تقوم بالتمرير للصفحة قليلاً بحيث تنتهي القائمتين في وضعه على قمة بعضهما البعض. ثم يبدو أن القوائم مرتبكة فيما يتعلق بالمرء الذي يجب أن يتلقى فيه العنصر الذي يتم سحبه ، مما يعني أنك تحصل على مجموعة من الحدوث كما يبدو/تختفي في كل قائمة.

يبدو أن المشكلة هي أن كلتا القائمتين تتعاملان مع أحداث الماوس/الفرز لأن العنصر الذي يتم سحبه هو من الناحية الفنية على كلا القائمتين ، لكن ما أريده هو الحصول على القائمة المتراكبة (أي 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>

لذا فإن السؤال هو ، كيف يمكنني إصلاحه؟

هل كانت مفيدة؟

المحلول

انتهى بي الأمر بإصلاح هذه المشكلة عن طريق تمديد المدمج في 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 بكسل من الشاشة ، لأن هذا هو المكان الذي كان فيه تراكبي الثابت (وهو ليس دقيقًا تمامًا في هذا المثال المخلص ، ولكن نأمل أن يكون من المنطقي أن يكون منطقيًا ).

نصائح أخرى

لقد قمت بتنفيذ التغيير إلى الفرز حتى يأخذ Z-Index في الاعتبار.

انظر شوكة بلدي هنا: https://github.com/david04/jquery-ui/Commit/feaf94ebabace4d11b5e98c412d795d68ca9d51(10 أسطر من الكود ، تغيير بسيط للغاية)

ستحتاج إلى إضافة الخيار compareZIndex=true عند الاتصال sortable.

هذا هو الخطأ الذي أعتقد أنك تواجهه ، والإصلاح أبسط كثيرًا:

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

واجهت هذه المشكلة على صفحة حيث لدي قائمة واحدة أعلى من القائمة الثانية. على الرغم من أن الفائض تم تعيينه على المخفية ، إلا أن الفائض غير المرئي للقائمة العليا لا يزال يحجب الحدث فوق الحدث للقائمة أدناه (يمكن تأكيد ذلك عن طريق إعداد التدفق على التلقائي في القائمة العليا للمساعدة في تصور التداخل). إنها مشكلة Z-index.

كان إصلاحي هو وضع هذا الرمز في حدث التوقف القابل للفرز:

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

ما أفعله هنا هو إخفاء عناصر القائمة العليا بوضوح ، تاركًا فقط أفضل 5 أشخاص مرئيين بحيث لا يوجد إزاحة DOM بين القائمة العلوية والسفلية.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top