Put the current value of a style attribute to a variable

Question

I have the following dynamic code. I want to put the position values "left" and "top" into variables. These values change as I drag this around the screen. What I would like to do is to store the last values so that when it gets destroyed, I can reuse the values to position it at the same place the next time.

<div onmouseover="setTimer();" class="soft_add_wrapper ui-draggable" style="left: 630.5px; top: 182px;">

I have the selector I think but then I am a little fussy

var xyz = $(".soft_add_wrapper ui-draggable").attr xxxxxxxxxxxxxxx

Answer 1

You can get the values with .css() like this:

var left = $(".soft_add_wrapper.ui-draggable").css('left');
var top = $(".soft_add_wrapper.ui-draggable").css('top');

If it's relative to the entire document and you want the overall position, you might consider using .offset(), or if you want relative to the parent, .position().

Note that the selector is .soft_add_wrapper.ui-draggable since you want to check both class selectors on the same element, there's no space.

Answer 2

You could just do

var offset = $(".soft_add_wrapper.ui-draggable").offset();

which will then be accessed like:

alert(offset.left);
alert(offset.top);