拖動時懸停效果如下

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/