Skip to content

Instantly share code, notes, and snippets.

@raphaelyancey
Created April 30, 2015 11:08
Show Gist options
  • Save raphaelyancey/41d400c637406327d9e3 to your computer and use it in GitHub Desktop.
Save raphaelyancey/41d400c637406327d9e3 to your computer and use it in GitHub Desktop.
Absolutely! WYSIWYG positionning (fork)
// Javascript
// ----------------------
$(document).ready(function (){
function update_style(el) {
var absolute_info = null;
$('.absolutely_output').empty();
var position = $(el).offset();
var parent = $(el).parent('.step');
var offset_top = position.top - parent.offset().top;
var offset_left = position.left - parent.offset().left;
absolute_info = '{ top: ' + Math.round(offset_top) +'px; left: '+ Math.round(offset_left) + 'px; }';
$('.absolutely_output').html(absolute_info);
}
var sort_list = $('.absolutely');
sort_list.draggable({
cursor: 'move',
tolerance:'pointer',
stop: function(event, ui) {
update_style(this);
}
});
});
// CSS
// ----------------------
.absolutely_output {
position: fixed;
z-index: 500;
background: #e8e8e8;
padding: 5px;
top: 0;
left: 0;
overflow: hidden;
font-size: 70%;
color: darkgrey;
}
// HTML
<div class="absolutely_output"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment