jQuery obtenir la position de la souris dans un élément

Question

J'espérais de l'artisanat de contrôle où un utilisateur peut cliquer à l'intérieur d'un div, puis faites glisser la souris, puis relâchez la souris pour indiquer combien de temps ils veulent quelque chose de l'être. (C'est pour un contrôle de calendrier, de sorte que l'utilisateur sera en indiquant la durée, dans le temps, d'un certain événement)

Il ressemble à la meilleure façon de le faire serait de créer un "mousedown" de l'événement sur la div parent qui à son tour enregistre un "mousemove" de l'événement sur la div jusqu'à ce qu'un "mouseup" de l'événement est déclenché. Le "mousedown" et "mouseup" événements définir le début et la fin de l'intervalle de temps et comme je l'ai suivi "mousemove" événements", je peux modifier dynamiquement la taille de la portée, de sorte que l'utilisateur peut voir ce qu'ils font. J'ai basé cette off de la façon dont les événements sont créés dans google agenda.

La question que je vais avoir, c'est que le jQuery événement semble être la seule à fournir des informations fiables de la souris la coordination de l'information en référence à l'ensemble de la page. Est-il possible de discerner les coordonnées sont en référence à l'élément parent?

Edit:

Heres une image de ce que je suis en train de faire:

Answer 1

Je vois Pointu de me battre pour le mot de la fin à propos du changement de l'élément parent du style d' "position:relative", mais d'une autre façon qui ne dépend pas de l'élément parent du style est d'utiliser le jQuery offset méthode permettant de traduire l' event.pageX et event.pageY coordonnées de l'événement dans une position de la souris par rapport à la mère. Voici un exemple de référence pour l'avenir:

$("#something").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

Answer 2

J’utilise ce morceau de code, son tout à fait agréable  :)

Answer 3

<pre><code></code><p><br><a href="http://api.jquery.com/mousemove/" rel="nofollow">http://API.jQuery.com/MouseMove/</a></p></pre>

Answer 4

Cette solution prend en charge tous les principaux navigateurs dont IE. Il s’occupe également de défilement. Tout d’abord, il récupère la position de l’élément par rapport à la page efficacement et sans utiliser une fonction récursive. Ensuite, il obtient de x et y du clic de la souris par rapport à la page et ne la soustraction pour obtenir la réponse qui est la position par rapport à l’élément (l’élément peut être une image ou un div par exemple) :

Answer 5

Si vous faites votre élément parent être « position : relative », alors il sera le « décalage parent » pour les choses que vous êtes suivi d’événements de souris au-dessus. Le jQuery « position() » est donc par rapport à celle.