Obtenir la position de la souris dans la div scrollable

Encore une autre question qui a été picorent à moi depuis quelques jours. Comme vous l'avez peut-être vu à partir de mon autre questions je suis la création de certains mind map des logiciels. Donc (très simplifié) j'ai deux divs. Celui qui est un carré sur la page, et un autre à l'intérieur que la div qui est environ 10 fois plus grand et déplaçable. C'est ainsi que les objets peuvent être placés sur l'écran, puis déplacé légèrement sur le côté, tandis qu'un autre objet est ajouté etc. Je fais cela par la création de l'extérieur div scrollable.

Les problèmes que j'ai bien sont à faire avec la position de la souris en java script. Si je reçois la position de la souris n'importe où dans le div, il ne sera pas correct que je compense l'intérieur de la div par la moitié de sa taille en haut et à gauche (donc, effectivement, l'utilisateur est à la recherche au milieu de la toile et peut aller de toute façon qu'ils aiment). J'ai essayé des dizaines de différentes souris coordonner des fonctions, mais aucune de ces semblent fonctionner. Un exemple qui est censé être du navigateur croix que j'ai trouvé quelque part sur le web est:

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

Mais même cela ne fonctionne pas. Je suis presque certain que l'erreur est parce que j'ai l'intérieure div étant déplaçable. J'espère avoir fait un certain sens, d'essayer d'expliquer, mais si je n'ai pas voici un très simple jsfiddle dans une tentative de démontrer la situation que j'ai (bien qu'aucun de clics de souris est fait ici, simplement pour montrer ma div de la structure). Dans le produit, j'ai fais l'utilisateur double-cliquez sur la toile et d'un nouvel objet apparaît, et c'est pourquoi la souris coordonnées doivent être correctes.

J'espère que quelqu'un peut m'aider.

Merci d'avance.

EDIT: Omis de mentionner que pour une partie de mon application que j'utilise JQuery et une solution avec ou sans JQuery serait bien. Merci encore.

J'ai remarqué que votre Violon est à l'aide de jQuery. Puisque vous n'avez pas le mentionner ici, vous serez à l'aide de jQuery dans le cadre de votre solution? Ce que les coordonnées de la souris attendez-vous, par rapport à la toile ou le document?
Eh bien, si cela peut être fait plus facile en JQuery, c'est ok... Soit la solution est bien... je mettrai à jour le post. J'ai besoin de la position relative à l'intérieur de la div, c'est à dire #toile dans le jsfiddle. Merci.

OriginalL'auteur Adam Holmes | 2011-02-10

19

J'espère que j'ai compris votre problème correctement.

Vous pouvez utiliser .offset() pour déterminer le décalage actuel de tout élément relatif à la racine du document. Ce décalage peut être ensuite comparée avec la position de la souris.

Vous pouvez utiliser de l'événement.pageX et de l'événement.pageY afin de déterminer la position actuelle de la souris.

Vous pouvez utiliser ${document}.scrollLeft() et ${document}.scrollTop() pour déterminer la position de défilement actuelle.

La position de la souris par rapport à l'intérieur de la div peut alors être obtenue avec
```
$("#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>');
});
```
Merci beaucoup, cela fonctionne un régal 🙂
Grande réponse complète! Merci!

OriginalL'auteur Aleksi Yrttiaho

Je sais que c'est très tard, mais j'ai couru dans la même situation moi-même et c'est ainsi que j'ai abordé.

Je ne voulais pas utiliser jQuery j'ai donc écrit ce récursif de la fonction decaler pour gérer un problème avec des décalages de défilement et le placement d'un div par exemple, dans plusieurs de défilement divs.

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;
}

De l'utiliser pour de vrai:

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

    posX = event.clientX+offsetpos.x;
    posY = event.clientY+offsetpos.y;

OriginalL'auteur Andre Van Zuydam

Vous devez vous connecter pour publier un commentaire.