重複するjQueryソート可能なリストを扱う
https://stackoverflow.com/questions/4092817
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
これは少しあいまいな問題ですが、私はjqueryのsortablesを使用しており、2つの接続されたリストをまとめて、1つが位置しているときにうまく動作しようとしています。 fixed. 。ページを少しスクロールするまで、2つのリストが互いの上に配置されるまで、すべて正常に機能します。その後、リストは、ドラッグされているアイテムを受信する必要があることについて混乱しているように見えます。つまり、各リストに表示/消えるように、ジッタリングが発生していることを意味します。
問題は、両方のリストがマウス/ソートイベントを処理しているため、ドラッグされているアイテムは技術的には両方のリストに渡っているためですが、私が望むのはオーバーレイリストを持っていることです（つまり、 position: fixed 1つ）イベントを飲み込み、基礎となるメインリストがアイテムを受け取ろうとしないようにします。
これが最小コードの例です。
<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 aを作成する機能 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つのコメントされた行を変更する必要があります。基本的には、声明が項目が浮かんでいる場合（したがって虚偽を返す）場合（したがって偽りを返す）場合（したがって偽り）する必要があります（したがって偽りです）item.instance.element と containerCache.sortable.element） は いいえ オーバーレイとイベント（this）オーバーレイの境界内で発生しています。このようにして、メインリストは、オーバーレイがあるページの場所でイベントを受信することはありません。したがって、このコードでは、画面の上位87ピクセルで発生した場合、メインリストはイベントを受け取りません。これは私の固定オーバーレイがあった場所だったので（この馬鹿げたダウンの例ではまったく正確ではありませんが、うまくいけば理にかなっています。 ）。
他のヒント
Z-Indexを考慮に入れるために、Surtableに変更を実装しました。
ここで私のフォークを参照してください： https://github.com/david04/jquery-ui/commit/feaf94ebabacee4d11b5e98c412d795d68ca9d51（10行のコード、非常に単純な変更）
オプションを追加する必要があります compareZIndex=true 電話するとき sortable.
これは私があなたが遭遇したと思うバグであり、修正ははるかに簡単です：
2番目のリストの上に垂直にリストが1つあるページでこの問題に遭遇しました。オーバーフローは非表示に設定されていますが、トップリストの目に見えないオーバーフローは、その下のリストの移動イベントをブロックしています（これは、オーバーラップを視覚化するためにオーバーフローをトップリストにAUTOに設定することで確認できます）。 Z-Indexの問題です。
私の修正は、このコードをSortable Stopイベントに配置することでした。
//expliclty hide the overflow items
$('.topList .item:gt(5)').hide();
$('.topeList .item:first').show();
私がここでやっていることは、トップリスト要素を明示的に隠していることであり、上位5のみが見えるようにして、上部リストとボトムリストの間にDOMオフセットオーバーラップがないようにすることです。
