J'ai déjà posé cette question sur les forums jQuery, mais ils ne sont pas aussi actifs qu'ici.jQuery UI droppables dans les conteneurs de défilement de débordement
J'ai rencontré un problème lorsque j'ai plusieurs zones de dépôt sur une page. J'ai une zone de dépôt "statique" qui ne bougera jamais, au-dessus d'un div qui a plusieurs zones de dépôt et qui peut défiler (débordement: défilement). Lorsque je fais défiler la div pour que l'une des droppables dans la div soit «sous» la droppable statique, l'événement drop est déclenché pour les deux zones si je tombe sur la zone statique.
Désolé, cette explication pourrait être vague, donc je mis en place un échantillon:
Markup:
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
<ul class="draggables">
<li>Draggable</li>
<li>Draggable</li>
<li>Draggable</li>
<li>Draggable</li>
<li>Draggable</li>
</ul>
</div>
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
<div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div>
<div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;">
<ul class="scroll-droppables">
<li style="border:1px solid #00f; height:60px;">Droppable</li>
<li style="border:1px solid #00f; height:60px;">Droppable</li>
<li style="border:1px solid #00f; height:60px;">Droppable</li>
<li style="border:1px solid #00f; height:60px;">Droppable</li>
</ul>
</div>
</div>
Javascript:
//create draggables
jQuery('.draggables li').draggable({
revert: 'invalid',
cursor: 'move',
helper: 'clone'
});
//the static droppable area
jQuery('.static-droppable').droppable({
greedy: true,
drop: function(event, ui) {
alert('Dropped on static drop area!');
}
});
//scrolling droppables
Query('.scroll-droppables li').droppable({
drop: function(event, ui) {
alert('Dropped on scrolling drop area!');
}
});
J'ai essayé rendre la zone de chute statique ' avide », mais cela ne semble pas aider dans la situation.
Une idée sur la façon d'arrêter ce qui se passe?