Il s'agit d'un problème un peu obscur, mais j'utilise jQuery Sortables et j'essaie de faire fonctionner correctement deux listes connectées lorsque l'une est positionnée comme fixed. Tout fonctionne bien jusqu'à ce que vous faites défiler la page un peu de sorte que les deux listes se retrouvent l'une sur l'autre. Ensuite, les listes semblent être confus quant à savoir lequel devrait recevoir l'objet qui est traîné, ce qui signifie que vous obtenez un tas de scintillement qui se passe comme il apparaît/disparaît dans chaque liste. Il semble que le problème est que les deux listes gèrent les événements mouse/sort puisque l'élément qui est déplacé est techniquement sur les deux listes, mais ce que je veux, c'est que la liste superposée (ie la position: fixed) avale les événements de sorte que la liste principale sous-jacente n'essaie pas de recevoir l'élément.Traitement des listes triantes jQuery chevauchantes
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?
Plongez dans le code de la bibliothèque, découvrez comment la fonction que vous utilisez fonctionne réellement, alors vous devriez être capable de résoudre votre problème. – aaaaaaaaaaaa