拖拽时的悬停效果

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");
          }
      });

    }
});

当我将"ha“框拖到它们上面( "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/版本