jQuery, drop image on overlaping target

Question

I am using jQuery to detect drop on target, the target in question is a image. If i drag one image upon another, and then drop it, it shall replace the target source with the dropped source. This works fine until two images lies upon each other.

Some of the images lies next to each other and some times the target images overlap. if i drop, both the visible image and the image beneath is replaced with the dragged image.

$("#drag img").draggable({
  drag: function(event) { //somethings }
});

$("#target img").droppable({
  accept: '#drag img',
  drop: function() {//change src }
});

A live exampel<-Removed, try to drag an image to the right image

I hope the problem is clear and their is any good solution.

Answer 1

Use stopImmediatePropagation to keep the event handler from being invoked on the next image. Which image is affected should be determine by the order of the event handlers. If you need it to apply only to the top image, then make sure that any image that overlaps another has it's handler applied first.

Answer 2

I manage to solve it bit more specific for my problem. Not so good but it works, i used the underlining div to detect drop like this:

$("#target").droppable({
  accept: '#drag img',
  drop: function() {//change src of image in this div }
});

I don't think this will help anyone but se @tvanfosson reply for a other solution