php - jQuery Draggable - 获取位置

Question

:) 我无法获得对象相对于容器的位置。 我只得到整个页面的位置。这是我的代码:

<style>
   .draggable { width: 150px; height: 0px; cursor:move; bottom: border:solid; border-color:#000; }
   <?PHP if($userinfo->use_colors != '0'): ?>
   #container { width: 450px; height:80px; background-color:<?=$userinfo->background?>; }
   <?PHP else: ?>
   #container { width: 450px; height:80px; background:url(/backgrounds/<?=$userinfo->image?>); }
   <?PHP endif; ?>
   </style>
<script>
   $(function() {
   $( "#draggable" ).draggable({ cursor: "move",containment: "#container", scroll: false,
   drag: function() {
   var position = $(this).position();
   var xPos = $(this).position().left;
   var yPos = $(this).position().top;
   $(this).text('x: ' + xPos + 'y: ' + yPos);
   }
                                            });
   $( "#draggable2" ).draggable({ cursor: "move",containment: "#container", scroll: false });
   $( "#draggable3" ).draggable({ cursor: "move",containment: "#container", scroll: false });
   $( "#draggable4" ).draggable({ cursor: "move",containment: "#container", scroll: false });
   });
   </script>


<div id="container">
   <div id="draggable" class="draggable" style="position:relative;top:0px;left:80px;">
   .::[ NowPlaying SIGnature ]::.
   </div>
   <div id="draggable2" class="draggable" style="position:relative;top:20px;left:80px;">
   Artist - title
   </div>
   <div id="draggable3" class="draggable" style="position:relative;top:40px;left:80px;">
   Album: (Year)
   </div>
   <div id="draggable4" class="draggable" style="position:relative;top:60px;left:80px;">
   Genre: 
   </div>

</div>

Answer 1

尝试

var xPos = $(this).css('left');
var yPos = $(this).css('top');

...相反。