Meta JS: Swap Positions

dPBLbO.markdown

dPBLbO

A Pen by Jared on CodePen.

License.

index.html

<b>Positioning</b><hr>
<div style='height: 250px'>
  <div id='anchor' style='border:1px solid #000; width: 120px; height: 100px;'>Anchor</div>
  <br>
  <div id='object' style='background: blue; color: white; border:1px solid #000; width: 120px; height: 100px;'>Object</div><br>
</div>
<button id='reposition'>Swap positions</button>

script.js

$('#reposition').on('click', function(){
  var anchor_offset = $('#anchor').get('offset');
  var anchor_height = $('#anchor').get('outerHeight');
  var anchor_top = anchor_offset['top'];
  var anchor_width = $('#anchor').get('outerWidth');
  var anchor_left = anchor_offset['left'];

  var object_offset = $('#object').get('offset');
  var object_height = $('#object').get('outerHeight');
  var object_top = object_offset['top'];
  var object_width = $('#object').get('outerWidth');
  var object_left = object_offset['left'];

  $('#object').add('css', {'position':'absolute', 'top':anchor_top+'px', 'left':anchor_left+'px'});
  $('#anchor').add('css', {'position':'absolute', 'top':object_top+'px', 'left':object_left+'px'});
});