Scriptaculous Draggable/Droppable script ne fonctionne pas correctement lorsque vous faites glisser dans un div de défilement

Question

J'utilise les scripts Scriptaculous Draggable/Droppable et ont un problème lorsque vous faites glisser dans un div de défilement. J'ai la disposition suivante (basé sur this question):

#grid-container { left:33px; position:relative; width:300px; } 
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; } 
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; } 
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center } 

.image-row { margin-left: 10px; } 
.grid-image { height:50px; margin-left:-20px; } 

Voici le code html:

<div id="grid-container"> 
    <div id="grid"> 
    <div id="row1" class="image-row"> 
     <ul> 
     <li><img id="img1" class="grid-image" src="images/img1.jpg"></li> 
     <li><img id="img2" class="grid-image" src="images/img2.jpg"></li> 
     <li><img id="img3" class="grid-image" src="images/img3.jpg"></li> 
     <li><img id="img4" class="grid-image" src="images/img4.jpg"></li> 
     </ul> 
    </div> 
    <div id="row2" class="image-row"> 
     <ul> 
     <li><img id="img5" class="grid-image" src="images/img5.jpg"></li> 
     <li><img id="img6" class="grid-image" src="images/img6.jpg"></li> 
     </ul> 
    </div> 
    </div> 
</div> 

J'ai une autre div avec des articles pouvant être déplacées, alors que tous les éléments img sont largable. Cela fonctionne très bien dans la plupart des cas, mais quand il y a trop d'images pour la grille et qu'il faut faire défiler, je rencontre des problèmes. Je peux toujours glisser/déposer dans la plupart des éléments de cette div, mais lorsque je défile vers le bas et que j'essaie de glisser sur un élément au bas de la liste, il tombe sur la ligne qui était en bas avant de faire défiler la div.

Même si je définis l'attribut de défilement lors de la création des éléments Draggable, il fera défiler la div grid, mais n'utilisera pas l'élément Droppable approprié.

Y at-il un moyen de faire tomber les éléments Draggable sur l'élément Droppable approprié indépendamment du fait que le div contenant soit défilé ou non?

Answer 1

Hier, j'ai trouvé ce drag-drop-problem-in-scroll-div en ayant le même problème. Fondamentalement, la solution consiste à ajouter Position.includeScrollOffsets = true; à votre code.

Espérons que cela aide