jQuery: Element offset() coordonnées par rapport à un autre élément

Question

J'essaie d'utiliser jQuery et jQuery UI pour faire glisser un élément <ul> horizontalement situé à l'intérieur d'un <div>.

Je voudrais obtenir les coordonnées des boutons situés à l'intérieur des <li> éléments pour les centrer à l'intérieur #the_parent, mais la position que je reçois des changements chaque fois que je redimensionnez la fenêtre du navigateur, comment je peux obtenir une position par rapport à #the_parent?

<script type:"text/javascript"> 
    $(document).ready (function() { 
     $(".button").click (function() { 
      var offset = $(this).offset(); 
      alert (offset.left); 
     }); 
    }); 
</script> 
<style type="text/css"> 
    #dragme li { float:left; list-style:none; } 
    #the_parent { width:100%; } 
    .spacer { width:100px; } 
    .button div { padding:5px; background-color:darkgrey; color:white; } 
</style> 
<!-- this is contained inside another div of width:600px and it's centered in the middle of the page --> 
<div id="the_parent"> 
    <ul id="dragme"> 
     <li class="spacer"></li> 
     <li id="btn_01" class="button"> 
      <div>click</div> 
     </li> 
     <li class="spacer"></li> 
     <li id="btn_02" class="button"> 
      <div>click</div> 
     </li> 
     <li class="spacer"></li> 
    </ul> 
</div> 

Answer 1

On dirait que vous voulez position() au lieu de offset(). De la documentation jQuery:

offset(): obtenir les coordonnées courantes du premier élément dans l'ensemble des éléments appariés, par rapport au document.

position(): Récupère les coordonnées actuelles du premier élément de l'ensemble des éléments correspondants, par rapport au parent de décalage.

Answer 2

Vous souhaitez utiliser .position() et non .offset().