1

オブジェクトを他のオブジェクトの上にドラッグしているときに、「ホバー」のような効果を作りたいです。ホバーできるオブジェクトは 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を入れていません。私は自分の問題を単純化しようとしました。

これを機能させるためのアイデアはありますか？

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 に答える