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”框拖过它们（“下”类）时，这些框应该有一点插入阴影。我尝试将它们的位置与光标位置进行比较，但它的效果并不好。

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/

在拖动时悬停像效果一样

1 个答案: