Наведение, подобное эффекту при перетаскивании

Question

Я хочу сделать эффект «зависания», перетаскивая объект поверх других объектов. Объекты, которые можно зависнуть, находятся внутри iframe, в то время как объект, который пользователь может перетаскивать, находится за пределами iframe.

Этой скрипка иллюстрирует то, что я пытаюсь сделать: http://jsfiddle.net/9yyKN/14/

$("#ha").draggable({ 

    drag: function() { 

     $(".box").each(function() { 
      $(this).removeClass("under"); 
      if (event.pageX > $(this).position().left 
       && event.pageX < ($(this).position().left + $(this).width()) 
       && event.pageY > $(this).position().top 
       && event.pageX < ($(this).position().top + $(this).height())) 
      { 
       $(this).addClass("under"); 
      } 
     }); 

    } 
}); 

Коробков должны иметь небольшую врезку тень, когда я тащил на «ха» окно на них («под» классом). Я попытался сравнить их положение с позицией курсора, но это не очень хорошо работает.

В iframe также есть div над ним, поэтому я могу перетаскивать объекты поверх него без эффекта перетаскивания. Но из-за этого :hover, .mouseover() и т.п. не будет работать. Хотя я не поставил iframe в эту скрипку. Я просто попытался упростить свою проблему.

Любые идеи для выполнения этой работы?

Answer 1

У вас есть небольшая ошибка ваше состояние должно быть:

if (event.pageX > $(this).position().left 
    && event.pageX < ($(this).position().left + $(this).width()) 
    && event.pageY > $(this).position().top 
    && event.pageY < ($(this).position().top + $(this).height())) 

здесь смотрите: http://jsfiddle.net/straeger/fggKn/

Вот более точно версия http://jsfiddle.net/straeger/TbwAT/1/