JQuery - Multiple Droppables Overlap Result in Unpredictable Drops

Question

I have a draggable object that is discarded on an isometric grid with delimiters that overlap. Panels are gray tiles, img tags and look like the first attached image. They are highlighted in blue when dragged over them.

Here is the source code for droppable:

        $(".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'
        });

Basically, I would like to have a) select one tile at a time, and b) highlight the selected fragment with the one on which the object was deleted.

I tried all types of tolerance to no avail.

Images:

i.imgur.com/dGx9X.png

and

i.imgur.com/vb1d9.png

Answer 1

droppable, droppables droppable. drop .

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

drop $(this) $( ". over" )