jQuery - Droppables à chevauchement multiple aboutissant à des gouttes imprévisibles

Question

J'ai un objet à déplacer qui est déposé sur une grille isométrique de gouttelettes qui se chevauchent. Les droppables sont les tuiles grises, les balises img, et ressemblent à la première image jointe. Ils sont définis pour mettre en évidence bleu quand un draggable est sur eux.

Voici le code source pour le largable:

 $(".sprite").droppable({ 
      drop: function(event,ui) { 
       object_id = ui.draggable.attr("id").replace("sprite_",""); 
       set_action('move_object',$(this).attr("id")); 
       set_target(object_id); 
       ui.draggable.removeClass("holding"); 
      }, 
      over: function(event, ui) { 
       $(this).attr("src",$(this).attr("src").replace('.png','-hover-blue.png')); 
      }, 
      out: function(event, ui) { 
       $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png')); 
      }, 
      tolerance: 'pointer' 
     }); 

En fait, je voudrais avoir a) un point fort de tuile à la fois, et b) ont la tuile surligné être celui de l'objet est abandonné sur.

J'ai essayé tous les types de tolérance en vain.

Images:

i.imgur.com/dGx9X.png

et

i.imgur.com/vb1d9.png

Answer 1

Une fois le déplacement drabbable sur une largable vous devriez désactiver toutes les autres gouttières et activer la droppable actuelle. Ensuite, il est simple d'avoir l'effet de goutte sur le droppable actif.

dans la fonction sur

$(".sprite").not($(this)).removeClass("over") 
    .each(function(){ 
    $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png')); 
    }); 
$(this).addClass("over"); 

alors en baisse $ replace (cela) avec $ ("sur")