0

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/

astx123
  • 85
  • 8

2 Answers2

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.

Sam
  • 4,437
  • 11
  • 40
  • 59
  • Thing is I need to use bottom and right, or to do some workaround. I explained why in the reply to Roshan jha. Is there a possible solution, or `left:90%` etc is really the only way to go? – astx123 Jul 24 '14 at 11:13
  • no answer needed. even if there is a workaround, it's probably better to do a minor css tweaking. Thanks for the help. – astx123 Jul 24 '14 at 11:29
1

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

Community
  • 1
  • 1
Roshan
  • 2,144
  • 2
  • 16
  • 28
  • The problem is I really need to position this element with bottom and right, because it should be in the bottom-right corner of the fluid page, but on the exact same place relative to it's parent (fluid footer), which is why I don't use `position:fixed`, `left:90%` etc. Is there any workaround possible? – astx123 Jul 24 '14 at 11:08
  • am not able to understand this line of your comment "exact same place relative to it's parent". which place relative to parent,or it should be always bottom-left corner of a page – Roshan Jul 24 '14 at 11:17
  • my fluid footer is defined with `left:150px; right:150px`, not with percentages, but I guess you are right. I'm being too picky. I'll just use the fixed position with % and treat the element independently. I'll probably switch the footer to percentages anyway. Thanks for your help. – astx123 Jul 24 '14 at 11:27