Website Layout with Sortable()

by bizamajig

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
	<body>
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand" href="#" style="padding:0 20px"><img src="img/dl-logo-cut.png"></a>
					<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li><a href="http://dl.sumdu.edu.ua/ru">Главная страница</a></li>
							<li class="active"><a href="#">Дистанционное обучение</a></li>
							<li><a href="#">Наши сотрудники</a></li>
						</ul>
						<ul class="nav pull-right">
							<li><a href="#"><i class="icon-tasks"></i> Мои задания <span class="badge badge-success">2</span></a></li>
							<li><a href="#"><i class="icon-envelope"></i> Мои сообщения <span class="badge badge-important">12</span></a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-intro='Меню быстрого доступа<br/>Это меню будет всегда на этом месте, на какой бы вы не были странице.' data-step='1'>
									Овчинников Илья
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#"><i class="icon-user"></i> Мой профиль</a></li>
									<li><a href="#"><i class="icon-briefcase"></i> Мои дисциплины</a></li>
									<!--<li><a href="#"><i class="icon-wrench"></i> Администрирование</a></li>/-->
									<li class="divider"></li>
									<li><a href="#"><i class="icon-off"></i> Выход</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div...

CSS

.sortable {
			margin: 0;
			padding: 0;
		}
		.sortable:hover {
			cursor:move;
		}
		.sidebar-nav{
			padding: 10px 0px;
		}
		.thumbnail {
			background-color: rgba(251,251,251,0.6);
			/*margin-top:10px;*/
			margin: 0;
			padding: 0;
		}

        .ui-sortable-placeholder {
            margin-left: 0 !important;
        }
    
#sortable, #sortable2 {
    min-height: 300px;
}

JavaScript

$(document).ready(function() {
    $( "#sortable,#sortable2" ).sortable({
        connectWith: "#sortable,#sortable2"
    });
    $( "#sortable,#sortable2" ).disableSelection();
		});