Two overlapping droppables - it drops on the underneath droppable?!

Two overlapping droppables - it drops on the underneath droppable?!

Hi, I have two droppable areas - one is a map and the other a list containing pins to be dragged onto the map. Pins can also be dragged from the map back to the list.

The map can be zoomed in and out and panned. If you pan around the map so that it is now underneath the list containing the pins, then drag a pin from the map to the list, it still thinks the droppable is the map.

example code:

  1.             jQuery("#map").droppable({
  2.                 accept: '.ui-draggable',
  3.                 drop: function(event, ui) {
  4.                     var dropPin = ui.helper.clone();
  5.                     jQuery(dropPin).css({
  6.                         "position": "absolute",
  7.                         "top": ui.offset.top - jQuery(this).offset().top,
  8.                         "left": ui.offset.left - jQuery(this).offset().left,
  9.                         "z-index": "11"
  10.                     });
  11.                     jQuery(this).append(jQuery(dropIcon));
  12.             });
  13.             jQuery("#list").droppable({
  14.                     accept: "#map .ui-draggable",
  15.                     drop: function(event, ui) {
  16.                         jQuery(this).append(ui.draggable);
  17.                     }
  18.                 });

How can I get the pin to drop on the list droppable and not the map droppable?

Thanks