精品久久久久久久久久久久久久,欧日韩不卡在线视频,色婷婷一区

本文介紹了處理重疊的 jQuery 可排序列表的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

限時送ChatGPT賬號..

這是一個有點模糊的問題，但我正在使用 jQuery Sortables 并試圖讓兩個連接的列表在一個定位為 fixed 時很好地協同工作.一切正常，直到您稍微滾動頁面以使兩個列表最終位于彼此之上.然后列表似乎會混淆哪個應該接收被拖動的項目，這意味著當它在每個列表中出現/消失時會發生一堆抖動.

This is a bit of an obscure issue, but I'm using jQuery Sortables and trying to get two connected lists working together nicely when one is positioned as fixed. It all works fine until you scroll the page a bit such that the two lists end up positioned on top of each other. Then the lists seem to get confused as to which one should be receiving the item that's being dragged, meaning you get a bunch of jittering happening as it appears/disappears in each list.

看起來問題是兩個列表都在處理鼠標/排序事件，因為被拖動的項目在技術上是在兩個列表上，但我想要的是覆蓋列表(即 position:fixed 一)吞下事件，這樣底層主列表就不會嘗試接收項目.

It looks like the issue is that both lists are handling the mouse/sort events since the item being dragged is technically over both lists, but what I want is to have the overlayed list (i.e. the position: fixed one) swallow the events so that the underlying main list doesn't try to receive the item.

這是最小的代碼示例:

<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>

所以問題是，我該如何解決?

So the question is, how do I fix it?

推薦答案

我最終解決了這個問題，方法是擴展內置的 sortable 功能以創建一個 fixedSortable 來檢測并在有覆蓋時選擇性地忽略懸停在列表上.出于我的目的，我只是對規則進行了硬編碼，因為這適合我的需求/時間限制，但是您應該能夠使其完全通用而無需太多努力.

I ended up fixing this issue by extending the built in sortable functionality to create a fixedSortable that detects and selectively ignores hovering over lists when there's a overlay in place. For my purposes, I just hard coded the rules, since that suited my needs/time constraints, but you should be able to make it completely generic without too much effort.

首先是代碼(下面有解釋):

Firstly here's the code (explanation below):

<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 個像素中，則它們不會接收任何事件，因為那是我的固定疊加層所在的位置(在這個簡化的示例中不太準確，但希望它仍然有意義).

If adapting this yourself, you'll need to change the two commented lines marked above. Basically the if statements should evaluate to true (and thus return false) if the item being hovered over (item.instance.element and containerCache.sortable.element) is not the overlay and the event (this) is occurring within the bounds of the overlay. This way the main list never receives events in the location of the page where the overlay is. So in this code the main list doesn't receive any events if they occur in the top 87 pixels of the screen, since that's where my fixed overlay was (which is not quite accurate in this dumbed down example, but hopefully it still makes sense).

這篇關于處理重疊的 jQuery 可排序列表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

處理重疊的 jQuery 可排序列表

問題描述

推薦答案

相關文檔推薦