:) I can't get the position ot objects relative to it's container. I get only the position on whole page.Here is my code:

<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>

:) I can't get the position ot objects relative to it's container. I get only the position on whole page.Here is my code:

<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>

• php
• javascript
• jquery
• html

Share Improve this question Follow edited Feb 14, 2011 at 14:28 CappY asked Feb 14, 2011 at 14:21 CappYCappY 1,58011 gold badge1717 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try

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

...instead.