9

これは少しわかりにくい問題ですが、私は jQuery Sortables を使用しており、2 つの接続されたリストがfixed. 2 つのリストが互いの上に配置されるようにページを少しスクロールするまで、すべて正常に機能します。次に、リストは、ドラッグされているアイテムを受け取る必要があるかどうかについて混乱しているように見えます。つまり、各リストに表示/非表示になると、大量のジッタリングが発生します。

問題は、ドラッグされているアイテムが技術的に両方のリストの上にあるため、両方のリストがマウス/ソート イベントを処理しているように見えますが、オーバーレイされたリスト (つまり、position: fixed1 つ) がイベントを飲み込み、基になるメインがlist はアイテムを受信しようとしません。

最小限のコード例を次に示します。

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

問題は、どうすれば修正できるかということです。

4

4 に答える 4

5

組み込み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>

これを自分で変更する場合は、上記の 2 つのコメント行を変更する必要があります。基本的に、if ステートメントは、ホバーされているアイテム (item.instance.elementおよびcontainerCache.sortable.element) がオーバーレイではなく、イベント ( this) がオーバーレイの境界内で発生している場合、true と評価される (したがって、false を返す) 必要があります。このようにして、メイン リストは、オーバーレイがあるページの場所でイベントを受け取ることはありません。したがって、このコードでは、画面の上部 87 ピクセルでイベントが発生した場合、メイン リストはイベントを受信しません。これは、固定オーバーレイがあった場所だからです (この馬鹿げた例では正確ではありませんが、それでも意味があることを願っています)。 ）。

于 2010-12-07T00:46:46.490 に答える
3

z-index を考慮に入れるために、sortable への変更を実装しました。

ここで私のフォークを参照してください: https://github.com/david04/jquery-ui/commit/feaf94ebabacee4d11b5e98c412d795d68ca9d51 (10 行のコード、非常に単純な変更)

compareZIndex=trueを呼び出すときにオプションを追加する必要がありますsortable。

于 2014-05-16T13:27:37.783 に答える
2

これはあなたが遭遇していると私が思うバグであり、修正ははるかに簡単です:

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

于 2011-11-18T18:04:31.923 に答える
0

1 つのリストが 2 つ目のリストの上に垂直にあるページで、この問題に遭遇しました。オーバーフローが非表示に設定されていても、一番上のリストの目に見えないオーバーフローは、その下のリストの移動イベントをまだブロックしています (これは、オーバーラップを視覚化するために一番上のリストでオーバーフローを auto に設定することで確認できます)。これは z-index の問題です。

私の修正は、このコードをソート可能な停止イベントに配置することでした:

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

ここで行っているのは、上位リストの要素を明示的に非表示にし、上位 5 つの要素のみを表示して、上位リストと下位リストの間で DOM オフセットが重複しないようにすることです。

于 2012-05-10T19:17:30.610 に答える