16

過去数日間私を悩ませてきたさらに別の質問。他の質問からわかるように、私はいくつかのマインドマップソフトウェアを作成しています。したがって（非常に単純化されています）、2つのdivがあります。1つはページ上の正方形で、もう1つはそのdiv内にあり、約10倍の大きさでドラッグ可能です。これは、オブジェクトを画面に配置してから、別のオブジェクトを追加するときに少し横に移動できるようにするためです。これを行うには、外側のdivをスクロール可能にします。

私が抱えている問題は、Javaスクリプトのマウスの位置に関係しています。div内の任意の場所でマウスの位置を取得すると、内側のdivを上下に半分のサイズでオフセットするため、正しくありません（したがって、ユーザーはキャンバスの中央を見て、好きなように移動できます） 。私は何十もの異なるマウス座標関数を試しましたが、どれも機能していないようです。私がウェブ上のどこかで見つけたクロスブラウザであると思われる例は次のとおりです。

function getMouse(e) {
  var posx;
  var posy;
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  }
  else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft;
    posy = e.clientY + document.body.scrollTop  + document.getElementById("canvas").scrollTop;
  }
} //getMouse

しかし、これでも機能しません。内側のdivがドラッグ可能であるため、エラーが発生していることはほぼ間違いありません。うまくいけば、説明しようとしてある程度意味がありますが、ここにない場合は、私が持っている状況を示すための非常に単純なjsfiddleです（ただし、ここではマウスクリックは行われていませんが、純粋にdiv構造を示しています）。私が作成している製品では、ユーザーがキャンバスをダブルクリックすると新しいオブジェクトが表示されるため、マウスの座標が正しい必要があります。

誰かが私を助けてくれることを願っています。

前もって感謝します。

編集：私のアプリケーションの一部でJQueryを使用しているため、JQueryを使用する場合と使用しない場合のどちらのソリューションでも問題ないことを言及できませんでした。再度、感謝します。

4

2 に答える 2

24

私はあなたの問題を正しく理解したと思います。

.offset（）を使用して、ルートドキュメントを基準にした任意の要素の現在のオフセットを決定できます。このオフセットは、マウスの位置と比較できます。

event.pageXおよびevent.pageYを使用して、現在のマウス位置を判別できます。

$ {document} .scrollLeft（）と${document}を使用できます。scrollTop（）を使用して、現在のスクロール位置を決定します。

次に、内側のdivに対するマウスの位置を次のように取得できます。

$("#outer_canvas").mousemove(function(e) {
    var relativePosition = {
      left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left,
      top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top
    };
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>');
});
于 2011-02-11T02:02:32.350 に答える
4

これは非常に遅いことは知っていますが、私自身も同じ状況に遭遇し、これが私がそれに取り組んだ方法です。

jQueryを使用したくなかったので、この再帰オフセット関数を作成して、スクロールオフセットと、たとえば複数のスクロール可能なdivでのdivの配置に関する問題を処理しました。

function recursive_offset (aobj) {
 var currOffset = {
   x: 0,
   y: 0
 } 
 var newOffset = {
     x: 0,
     y: 0
 }    

 if (aobj !== null) {

   if (aobj.scrollLeft) { 
     currOffset.x = aobj.scrollLeft;
   }

   if (aobj.scrollTop) { 
     currOffset.y = aobj.scrollTop;
   } 

   if (aobj.offsetLeft) { 
     currOffset.x -= aobj.offsetLeft;
   }

   if (aobj.offsetTop) { 
     currOffset.y -= aobj.offsetTop;
   }

   if (aobj.parentNode !== undefined) { 
      newOffset = recursive_offset(aobj.parentNode);   
   }

   currOffset.x = currOffset.x + newOffset.x;
   currOffset.y = currOffset.y + newOffset.y; 
   console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
 }
 return currOffset;
}

実際に使用する：

    var offsetpos = recursive_offset (this); //or some other element

    posX = event.clientX+offsetpos.x;
    posY = event.clientY+offsetpos.y;
于 2013-06-12T09:42:56.123 に答える