Basic widget system, with position retention

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">
	$( document ).ready(function() {
		//Loop through all widget class elements
		$('.widget').each(function() {
			//Get localstorage values on location
			var widgetPosX = localStorage.getItem(this.id+'_posX');
			var widgetPosY = localStorage.getItem(this.id+'_posY');

			//If values are not null, change the element position
			if (widgetPosX != null && widgetPosY != null) {
				$(this).css('left', widgetPosX);
				$(this).css('top', widgetPosY);
			}
		});
	});

	$(function() {
		//Widget dragging
		$( ".widget" ).draggable({
			grid: [10, 10],
			stop: function(event, ui){
				//On drag release, get position and save to localstorage
				var pos = $(this).position();

				localStorage.setItem(this.id+'_posX', pos.left);
				localStorage.setItem(this.id+'_posY', pos.top);
			}
		});
	});
</script>

<style>
HTML, body {
	margin: 0px;
	padding: 0px;
}
.widget {
	position: absolute;
	display type: inline-block;
	 width: 100px;
	 height: 100px;
	 background: #ddd;
	 opacity: .5;
}
</style>

<div class="widget" id="widget1">Widget 1</div>
<div class="widget" id="widget2" style="top: 110px;">Widget 2</div>