javascript - 拖动时悬停效果

Question

我想在将一个对象拖到其他对象上时产生类似“悬停”的效果。可以悬停的对象在 iframe 内部，而用户可以拖动的对象在 iframe 外部。

这个 fiddle 说明了我正在尝试做的事情: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() 等将不起作用。不过，我还没有在这个 fiddle 中放一个 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/