Skip to content

Instantly share code, notes, and snippets.

@draftkraft

draftkraft/Aloha-Editor-jQueryUI-sortable

Created February 15, 2012 09:23
Show Gist options
  • Save draftkraft/1834710 to your computer and use it in GitHub Desktop.
Save draftkraft/1834710 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Ui sortable demo with Aloha Editor
Raw
Aloha-Editor-jQueryUI-sortable
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment