jQuery chevauchement d'éléments déversables

Question

J'ai 1 div divisible et 2 divs droppable. Ces 2 divs droppable sont également déplaçables, donc il y a une chance que ces 2 divs se chevauchent. Dans cette situation, lorsque je fais glisser la div draggable et que je la laisse tomber sur les divs qui se chevauchent, y a-t-il un moyen de s'assurer qu'elle tombe sur la partie supérieure?

Answer 1

J'avais un problème légèrement différent: j'avais deux types de gouttes, un type toujours sur l'autre.

Pour savoir sur quel droppable le draggable a été déposé, la droppable supérieure a ajouté une classe au draggable lorsqu'il a été déplacé dessus. Lorsque l'événement de dépôt a tiré sur les deux droppables, la droppable inférieure a vérifié pour voir si le draggable avait la classe ajoutée. Si oui, alors il a ignoré l'événement drop.

top.droppable({ 
    over: function(drop_event, drop_ui) { 
     drop_ui.helper.addClass('over_top_element'); 
    }, 
    out: function(drop_event, drop_ui) { 
     drop_ui.helper.removeClass('over_top_element'); 
    }, 
    drop: function(drop_event, drop_ui) { 
     //Handle drop here 
    } 
}); 

bottom.droppable({ 
    drop: function(drop_event, drop_ui) { 
     if (!ui.helper.hasClass('over_top_element')) 
     { 
      //Handle drop here 
     } 
    } 
});