set right position in a draggable div

Question

What i'm tryinjg to do:

Turn a div as draggable , then make a button to reset her position as default.

the question is, why i cant set the right position of a absolute div, after i set as draggable ?

edit: dragg the div first and then click in the button.

$('div').draggable();
$('#button').click(function(){
   $('div').draggable('destroy').css({ // destroy was only a test
       top: 0,
       right: 0 // nothing happens
   });
});

jsfiddle demo .

the position only work if i use left .

edit 2: the reason i'm not using the left position, its because if i zoom in, will overlay other things. Any tips, be my guest.

What i'm missing ?

Answer 1

It's because $.draggable() sets left as you drag the div around, and it stays set after you call $.draggable('destroy')

Just reset left using left: auto; http://jsfiddle.net/9uLCY/7/

$('div').draggable();
$('#button').click(function(){
   $('div').draggable('destroy').css({
        top: 0,
        left: 'auto',
        right: 0
    });
});

Answer 2

Because there's still a "left" value on your draggable element which takes precedence over the "right" value. You need to "unset" the left value

Answer 3

首先将左位置重置为auto ，因为可拖动方法中仍然存在左位置，然后设置右位置。