Il s'agit d'un problème obscur, mais j'utilise jQuery Sortables et j'essaie d'obtenir deux listes connectées de manière bien associée lorsque l'on est positionné comme On dirait que le problème est que les deux listes sont que les deux listes sont Manipulation des événements de souris / tri car l'élément en cours d'entraînement est techniquement sur les deux listes, mais ce que je veux, c'est avoir la liste superposée (c.-à-d. La position Voici l'exemple de code minimal: donc la question est la suivante: comment puis-je le réparer? < / p> fixe . Tout fonctionne bien jusqu'à ce que vous faites défiler la page un peu de sorte que les deux listes finissent par se positionnées les unes sur les autres. Ensuite, les listes semblent être confondues quant à laquelle il conviendrait de recevoir l'article qui est traîné, ce qui signifie que vous obtenez un tas de gouttes qui se produisent comme il apparaît / disparaît dans chaque liste. : fixe une) avaler les événements afin que le principal sous-jacent La liste n'essaie pas de recevoir l'élément.
4 Réponses :
J'ai fini par résoudre ce problème en étendant la fonctionnalité de code code> de type code> pour créer un Tout d'abord voici le code (explication ci-dessous): P > fixeSortable code> qui détecte et ignore sélectivement survolant les listes lorsqu'il y a une superposition en place. À mes fins, je viens de codé sur les règles, car cela convenait à mes besoins et à mes contraintes de temps, mais vous devriez pouvoir le rendre complètement générique sans trop d'effort. <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>
Ne sais pas si cela est utile à quiconque, mais je suis abandonné le code d'Alconja dans JSBIN afin que vous puissiez le voir fonctionner. JSBIN.COM/IQEMID/2 TOUS Merci à Alconja pour ce code ^^
Ceci est le bogue que je pense que vous rencontrez, et le correctif est beaucoup plus simple:
Je pense que c'est le même bug, mais le correctif suggéré ne couvre pas tous les scénarios (y compris celui mentionné par l'OP). Je pense que la réelle correction nécessite de déterminer le contexte d'empilement de tous les conteneurs dressés sous le curseur et de la sélection du conteneur le plus haut en termes de commande Z.
Ah, probablement vrai. Le correctif ne couvre que des listes qui se chevauchent en raison de débordement: cachés, non dus à la commande Z. Il semble que vous ayez besoin de trier les candidats par Z-commander d'abord, puis de les traverser jusqu'à ce que vous obteniez un coup.
J'ai rencontré ce problème sur une page où j'ai une liste verticalement au-dessus d'une deuxième liste. Même si le débordement est défini sur masqué, le débordement invisible de la liste supérieure bloque toujours le déplacement sur l'événement de la liste ci-dessous (ceci peut être confirmé en définissant le débordement sur Auto dans la liste supérieure afin de visualiser le chevauchement). C'est un problème de z-index.
Mon correctif consistait à placer ce code dans l'événement Seled STOP: P>
//expliclty hide the overflow items
$('.topList .item:gt(5)').hide();
$('.topeList .item:first').show();
J'ai mis en place la modification à la sorte pour qu'il prend en compte l'index Z de Z.
Voir ma fourchette ici: https://github.com/david04/jquery-ui / COMMIT / FEAF94EBABACEE4D11B5E98C412D795D68CA9D51 (10 lignes de code, changement assez simple)
Vous devrez ajouter l'option Comparezindex = true lorsque vous appelez triable .