Picking and calling original css with data() and attr() works in Firefox, but not in Opera and Chrome?

Question

I want to be able to reset draggable div to it's original position after dragging (jquery ui draggable() ) on some event in jquery. I did this:

$('#nav').draggable();

$('#nav').data({'x': $("#nav").css('left'), 'y': $("#nav").css('top')});

$("#c").click(function () {
    $('#nav').animate({'left': parseInt($("#nav").data('x')) - 15, 'top': parseInt($("#nav").data('y')) - 14}, {duration : 500});
});

and it works even in older Firefox but not in newest Opera and Chrome. I tried to replace data() with attr() and it's still the same.

How can this be achieved in a more cross-browser manner?

edit : here is this code in action: http://jsfiddle.net/MVCA6/

Answer 1

The problem here is that jQuery UI Draggable uses the top and left properties to move elements around, whereas you're setting the red boxes position using bottom and right ;

Adding console.log($('#nav').data()) to the click event you'll see your properties x and y are both set to auto .

To solve this you'll need to update your CSS to position the red box using top and left .

Example: http://jsfiddle.net/MVCA6/1/

As a side note: Proper indentation of code can help wonders when it comes to debugging issues.

Answer 2

In chrome i HAve seen result using

console.log($("#nav").data('x'));

It return auto ;

In mozilla it gives

447px

Possibly this may be the reason why it is not working in chrome.But if you assign left and top property in #nav in css as

left:447px;top:352px

It works fine. SEE DEMO HERE

For more detail you can also take help from HERE