<!doctype html>
<head>
<!-- Example JavaScript files -->
<script type="text/javascript" src="http://aloha-editor.org/builds/hotfix/latest/src/lib/vendor/jquery-1.6.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
var Aloha = {};
Aloha.settings = {
	jQuery: $
}
</script>
<link href="http://aloha-editor.org/builds/hotfix/latest/src/css/aloha.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://aloha-editor.org/builds/hotfix/latest/src/lib/aloha.js"
	data-aloha-plugins="common/format,common/list,common/link,common/highlighteditables,common/undo"></script>
<style>
.column {
	width: 170px;
	float: left;
	padding-bottom: 100px;
}
.portlet {
	margin: 0 1em 1em 0;
}
.portlet-header {
	margin: 0.3em;
	padding-bottom: 4px;
	padding-left: 0.2em;
}
.portlet-content {
	padding: 0.4em;
}
.ui-sortable-placeholder {
	border: 1px dotted black;
	visibility: visible !important;
	height: 50px !important;
}
#footer {
	clear: both;
}
</style>
</head>
<body>
	<div class="container">
		<h1>jQuery Ui sortable demo</h1>
		<p>You can use dynamic jQuery together with Aloha Editor.
		<!-- Example row of columns -->
		<div class="row">
			<div id="data-1" class="span-one-third editable">
				<h2>Heading</h2>
				<p>Try to edit this.</p>
				<p>
					<a class="btn" href="#">View details &raquo;</a>
				</p>
			</div>
		</div>
		<br clear="all" />
		<h1>You can sort</h1>
		<div class="column">
			<div class="portlet">
				<div class="handle">Take me here</div>
				<div class="editable">TITLE 2</div>
				<div class="editable">I am editable.</div>
			</div>
			<div class="portlet">
				<div class="handle">Take me here</div>
				<div class="editable">TITLE 2</div>
				<div class="editable">I am editable.</div>
			</div>
		</div>
		<div class="column">
			<div class="portlet">
				<div class="handle">Take me here</div>
				<div class="editable">TITLE 2</div>
				<div class="editable">I am editable.</div>
			</div>
		</div>
	</div>
	<p id="footer">Thanks to Markos for this example <a href="https://getsatisfaction.com/people/markos_3584778">Markos</a>.</p>

	<script type="text/javascript">
	Aloha.ready(function() {
		$('#data-1').aloha();
		$('.editable').aloha();
	});

	jQuery(document).ready(function() {
		jQuery(".column").sortable({
			// Add a handle otherwise the mouse and 
			// selection are interfering with the editables
			handle: ".handle",
			connectWith : ".column"
		});
		// Don't use disableSelection()
		//jQuery( ".column" ).disableSelection();
	});
</script>
	
</body>
</html>