1

I want to make a "hover" like effect while dragging an object over other objects. The objects that can be hovered is inside an iframe while the object the user can drag is outside the iframe.

This fiddle illustrates what i am trying to do: 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");
          }
      });

    }
});

The boxes should have a little inset shadow when i am dragging the "ha" box over them (the "under" class). I tried do compare their position with the cursor position, but it didn't end up working very well.

The iframe also have a div over it so i can drag objects over it without the drag effect going weird. But because of that :hover, .mouseover() etc. won't work. I have not put an iframe in this fiddle though. I just tried to simplify my problem.

Any ideas for making this work?

4

1 回答 1

2

你有一个小错误你的条件应该是：

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/

于 2013-07-01T14:51:11.423 回答