Coordonnées des éléments HTML

Je vais créer un “lasso” de sélection que l’utilisateur peut utiliser pour sélectionner des parties d’un tableau. Je pensais qu’il était beaucoup plus facile de positionner une div sur la région que d’essayer de manipuler les limites des cellules.

Si vous ne comprenez pas ce que je veux dire, ouvrez une feuille de calcul et faites glisser le curseur sur une région. Je veux que la division s’aligne parfaitement avec les limites de la cellule.

J’ai une très bonne idée de la procédure à suivre, mais comment puis-je obtenir les coordonnées (x, y) (position de l’écran) d’une cellule de tableau (td)?

Utilisez .offset() avec .height() et .width() si nécessaire.

 var td = $(someTDReference); var pos = td.offset(); pos.bottom = pos.top + td.height(); pos.right = pos.left + td.width(); // pos now contains top, left, bottom, and right in pixels

Edit: Not ~~.position()~~ , utilisez .offset() . Mis à jour ci-dessus.

Edit: changé pos.width() en td.width()

Hé, vous devriez pouvoir le faire comme ça (jsFiddle): http://jsfiddle.net/jackrugile/YKHkX/

 $('td').hover(function(){ var xPos = Math.floor($(this).offset().left); var yPos = Math.floor($(this).offset().top); });

Le Math.floor supprime les décimales délirantes et facilite le travail à mon avis. J’espère que cela pourra aider!

vous pouvez utiliser pageX et pageY pour suivre le curseur de la souris x, y

 $("#your_div").mouseover(function(e)) { x = e.pageX; y = e.pageY; }

vous pouvez définir la bordure div pour mettre en évidence la div au passage de la souris simplement

 $("#your_div").css("border","1px solid black");

cela affichera un peu l’effet actuel sélectionnable div …

que si si le div est

position: fixed et vous pouvez alors lire les propriétés left et top

espérons que cela vous aide

Pour ceux qui ne veulent pas utiliser jquery:

 var coordinates = td.getBoundingClientRect(); console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);