jQuery: смещение элементов по отношению к другому элементу

Question

Я пытаюсь использовать jQuery и jQuery UI, чтобы перетащить элемент <ul>, расположенный горизонтально в пределах <div>.

Я хотел бы получить координаты кнопок, расположенных внутри <li> элементов к центру их внутри #the_parent, но положение я меняется каждый раз, когда я изменить размер окна браузера, как я могу получить позицию относительно #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

Похоже, вы хотите position() вместо offset(). Из документов JQuery:

offset(): Получить текущие координаты первого элемента в наборе соответствующих элементов, по отношению к документу.

position(): Получить текущие координаты первого элемента в наборе согласованных элементов относительно родителя смещения.

Answer 2

Вы хотите использовать .position() не .offset().