处理重叠的 jQuery 可排序列表

时间：2023-04-29
本文介绍了处理重叠的 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模板网！

上一篇：HTML5 拖放事件和 setDragImage 浏览器支持 下一篇：在窗口外拖动时如何检测Firefox中的dragleave事件

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权