3 section Sortable UI problem
Hey Guys,
I'm using sortable for a 3 section UI.
I want the ability to shift the mainToolbar and subToolbar layers around while maintaining nav functionality so that people with pref for right/left hand nav can customise the UI.
The sorting all works well when there's four layers of equal size, but when I drop to 3 layers (with one as full width) the positioning gets a little disrupted. Since I'm a newbie at this coding stuff I thought you guys might be able to show me the way?
- <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<divnk rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<divnk rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { divst-style-type: none; margin: 0; padding: 0; width: 1024px; height: 768px; }
#mainToolbar { float: left; width: 1024px; height: 100px; background-color:#CC0033; }
#subToolbar { float: left; width: 200px; height: 100px; background-color: #093; }
#content { float: right; width: 824px; height: 100px; background-color: #36C; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<div id="sortable">
<div id="mainToolbar">1</div>
<div id="subToolbar">2</div>
<div id="content">3</div>
</div>
</body>
</html>