padcom/index.html

## index.html
<!doctype html>

<html>

<head>
	<title>Portalizer</title>
	<style>
		html, body {
			margin: 0; padding: 0;
		}

		table.layout {
			width: 100%;
			border: solid 1px black;
			border-collapse: collapse;
		}

		table.layout tbody tr, table.layout tbody td {
			border: solid 1px black;
			vertical-align: top;
		}

		.sortable-list {
			background-color: #F93;
			list-style: none;
			margin: 0;
			min-height: 60px;
			padding: 10px;
		}

		.sortable-item {
			background-color: #FFF;
			border: 1px solid #000;
			cursor: move;
			display: block;
			font-weight: bold;
			margin-bottom: 5px;
			padding: 10px 1px 1px 0px;
			text-align: center;
		}

		.placeholder {
			background-color: #BFB;
			border: 1px dashed #666;
			height: 3px;
			margin-bottom: 5px;
		}

		.ui-sortable-helper {
			opacity:0.6;
			filter:alpha(opacity=60); /* For IE8 and earlier */
		}
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script type="text/javascript">
		if (window.localStorage['setup'] == undefined) {
			window.localStorage['setup'] = JSON.stringify({
				'zone-1': [{
						id: 'zone-1-1',
						text: "Hello zone 1, item 1"
					}, {
						id: 'zone-1-2',
						text: "Hello zone 1, item 2"
					}],
				'zone-2': [{
						id: 'zone-2-1',
						text: "Hello zone 2, item 1"
					}, {
						id: 'zone-2-2',
						text: "Hello zone 2, item 2"
					}],
				'zone-3': [{
						id: 'zone-3-1',
						text: "Hello zone 3, item 1"
					}, {
						id: 'zone-3-2',
						text: "Hello zone 3, item 2"
					}]
				}
			);
		}

		var setup = JSON.parse(window.localStorage['setup']);

		$(document).ready(function() {
			var zone, i;
		    for (zone in setup) {
		    	for (i = 0; i < setup[zone].length; i++) {
			    	$("#" + zone).append("<li class='sortable-item' id='" + setup[zone][i].id + "'>" + setup[zone][i].text + "</li>");
			    }
		    }
			$('.sortable-list').sortable({
				connectWith: '.sortable-list',
				placeholder: 'placeholder',
				start: function(event, ui) {
					$(ui.item[0]).attr("org-zone", $(event.target).attr("id"));
				},
				beforeStop: function(event, ui) {
					var i, j;
					var id = ui.item[0].id;
					var orgZone = setup[$(ui.item[0]).attr("org-zone")];
					var destZone = setup[ui.item[0].parentElement.id];

					var item;

					for (i = 0; i < orgZone.length; i++) {
						if (orgZone[i].id == id) {
							item = orgZone.splice(i, 1)[0];
							break;
						}
					}

					if (destZone === undefined) {
						destZone = [ item ];
						setup[ui.item[0].parentElement.id] = destZone;
					} else {
						var list = ui.item[0].parentElement;
						var index;
						for (i = 0; i < list.childNodes.length; i++) {
							if (list.childNodes[i].id == id) {
								destZone.splice(i, 0, item);
								break;
							}
						}
					}

					window.localStorage['setup'] = JSON.stringify(setup);
				}
			});
		});
	</script>
</head>

<body>
	<table class="layout">
		<tr>
			<td colspan="2"><div id="header">HEADER</div></td>
		</td>
		<tr>
			<td width="200">SIDE BAR</td>
			<td>
				<table class="layout">
					<tr>
						<td colspan="3">
							<ul class="sortable-list" id="zone-1"></ul>
						</td>
					</tr>
					<tr>
						<td width="33%">
							<ul class="sortable-list" id="zone-2"></ul>
						</td>
						<td width="34%">
							<ul class="sortable-list" id="zone-3"></ul>
						</td>
						<td width="33%">
							<ul class="sortable-list" id="zone-4"></ul>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="2">FOOTER</td>
		</td>
	</table>
</body>

</html>
	<!doctype html>

	<html>

	<head>
	<title>Portalizer</title>
	<style>
	html, body {
	margin: 0; padding: 0;
	}

	table.layout {
	width: 100%;
	border: solid 1px black;
	border-collapse: collapse;
	}

	table.layout tbody tr, table.layout tbody td {
	border: solid 1px black;
	vertical-align: top;
	}

	.sortable-list {
	background-color: #F93;
	list-style: none;
	margin: 0;
	min-height: 60px;
	padding: 10px;
	}

	.sortable-item {
	background-color: #FFF;
	border: 1px solid #000;
	cursor: move;
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
	padding: 10px 1px 1px 0px;
	text-align: center;
	}

	.placeholder {
	background-color: #BFB;
	border: 1px dashed #666;
	height: 3px;
	margin-bottom: 5px;
	}

	.ui-sortable-helper {
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	}
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script type="text/javascript">
	if (window.localStorage['setup'] == undefined) {
	window.localStorage['setup'] = JSON.stringify({
	'zone-1': [{
	id: 'zone-1-1',
	text: "Hello zone 1, item 1"
	}, {
	id: 'zone-1-2',
	text: "Hello zone 1, item 2"
	}],
	'zone-2': [{
	id: 'zone-2-1',
	text: "Hello zone 2, item 1"
	}, {
	id: 'zone-2-2',
	text: "Hello zone 2, item 2"
	}],
	'zone-3': [{
	id: 'zone-3-1',
	text: "Hello zone 3, item 1"
	}, {
	id: 'zone-3-2',
	text: "Hello zone 3, item 2"
	}]
	}
	);
	}

	var setup = JSON.parse(window.localStorage['setup']);

	$(document).ready(function() {
	var zone, i;
	for (zone in setup) {
	for (i = 0; i < setup[zone].length; i++) {
	$("#" + zone).append("<li class='sortable-item' id='" + setup[zone][i].id + "'>" + setup[zone][i].text + "</li>");
	}
	}
	$('.sortable-list').sortable({
	connectWith: '.sortable-list',
	placeholder: 'placeholder',
	start: function(event, ui) {
	$(ui.item[0]).attr("org-zone", $(event.target).attr("id"));
	},
	beforeStop: function(event, ui) {
	var i, j;
	var id = ui.item[0].id;
	var orgZone = setup[$(ui.item[0]).attr("org-zone")];
	var destZone = setup[ui.item[0].parentElement.id];

	var item;

	for (i = 0; i < orgZone.length; i++) {
	if (orgZone[i].id == id) {
	item = orgZone.splice(i, 1)[0];
	break;
	}
	}

	if (destZone === undefined) {
	destZone = [ item ];
	setup[ui.item[0].parentElement.id] = destZone;
	} else {
	var list = ui.item[0].parentElement;
	var index;
	for (i = 0; i < list.childNodes.length; i++) {
	if (list.childNodes[i].id == id) {
	destZone.splice(i, 0, item);
	break;
	}
	}
	}

	window.localStorage['setup'] = JSON.stringify(setup);
	}
	});
	});
	</script>
	</head>

	<body>
	<table class="layout">
	<tr>
	<td colspan="2"><div id="header">HEADER</div></td>
	</td>
	<tr>
	<td width="200">SIDE BAR</td>
	<td>
	<table class="layout">
	<tr>
	<td colspan="3">
	<ul class="sortable-list" id="zone-1"></ul>
	</td>
	</tr>
	<tr>
	<td width="33%">
	<ul class="sortable-list" id="zone-2"></ul>
	</td>
	<td width="34%">
	<ul class="sortable-list" id="zone-3"></ul>
	</td>
	<td width="33%">
	<ul class="sortable-list" id="zone-4"></ul>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td colspan="2">FOOTER</td>
	</td>
	</table>
	</body>

	</html>