Traiter avec chevauchement des listes de jQuery
https://stackoverflow.com/questions/4092817
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Ceci est un peu un problème obscur, mais je l'utilise jQuery Sortables et essayer d'obtenir deux listes connectées travaillent ensemble bien quand on se positionne comme fixed. Tout fonctionne bien jusqu'à ce que vous faites défiler la page un peu de telle sorte que les deux listes se retrouvent placés au-dessus de l'autre. Ensuite, les listes semblent se confondre à laquelle on devrait recevoir l'élément de l'être traîné, ce qui signifie que vous obtenez un tas de jittering passe tel qu'il apparaît / disparaît dans chaque liste.
Il semble que le problème est que les deux listes gèrent les événements de souris / trier depuis l'être de l'élément traîné est techniquement sur les deux listes, mais ce que je veux est d'avoir la liste superposée (c.-à-la d'une position: fixed) avaler les événements afin que la liste principale sous-jacente ne cherche pas à recevoir l'article.
Voici l'exemple de code minimal:
<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>
La question est, comment puis-je résoudre ce problème?
La solution
J'ai fini par fixer ce problème en étendant la fonctionnalité intégrée de sortable pour créer un fixedSortable qui détecte et ne tient pas compte de manière sélective planant au-dessus des listes quand il y a une superposition en place. Pour mes besoins, je viens de les règles codées en dur, étant donné que mes besoins adaptés / contraintes de temps, mais vous devriez être en mesure de le rendre complètement générique sans trop d'effort.
Tout d'abord, voici le code (explication ci-dessous):
<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>
Si adapter vous-même, vous aurez besoin de changer les deux lignes commentées ci-dessus indiqués. Fondamentalement, le cas des déclarations doivent évaluer true (et donc le retour faux) si l'être de l'article planait au-dessus (item.instance.element et containerCache.sortable.element) est pas la superposition et l'événement (this) se produit dans les limites de la superposition . De cette façon, la liste principale ne reçoit jamais des événements à l'emplacement de la page où la superposition est. Donc, dans ce code, la liste principale ne reçoit pas d'événement si elles se produisent dans le top 87 pixels de l'écran, puisque c'est où mon recouvrement fixe était (ce qui est tout à fait exact dans ce abêtis par exemple, mais nous espérons qu'il a encore un sens ).
Autres conseils
Je mis en œuvre le changement à sortable pour qu'elle prenne le z-index en compte.
Voir ma fourchette ici: https://github.com/david04/jquery-ui / commit / feaf94ebabacee4d11b5e98c412d795d68ca9d51 (10 lignes de code, tout à fait simple changement)
Vous aurez besoin d'ajouter l'option compareZIndex=true lorsque vous appelez sortable.
Ceci est le bug je pense que vous rencontrez, et le correctif est beaucoup plus simple:
je suis tombé sur ce problème sur une page où j'ai une liste verticale au-dessus d'une seconde liste. Même si le débordement est réglé sur caché, le trop-plein invisible de la liste de haut bloque toujours le mouvement sur l'événement pour la liste ci-dessous (ceci peut être confirmé par la mise en débordement à l'auto dans la liste des top pour aider à visualiser le chevauchement). Il est une question z-index.
Mon solution était de placer ce code en cas d'arrêt sortable:
//expliclty hide the overflow items
$('.topList .item:gt(5)').hide();
$('.topeList .item:first').show();
Ce que je fais ici se cache explicitement les éléments de la liste de haut, ne laissant que le top 5 si visible qu'il n'y a pas de chevauchement DOM décalage entre le haut et en bas liste.
