Skip to content

Instantly share code, notes, and snippets.

@baugarten

baugarten/jquery-ui.html

Created August 29, 2013 14:12
Show Gist options
  • Save baugarten/6378600 to your computer and use it in GitHub Desktop.
Save baugarten/6378600 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI inserts second to last
Raw
jquery-ui.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$(".container-sortable").sortable({
});
$(".item-list").sortable({
connectWith: ".item-list"
});
$(".container-sortable,.item-list").disableSelection()
});
</script>
<style>
html, body {
height: 100%;
}
.container-sortable,
.container-sortable > li,
.item-list {
height: 100%;
}
.container-sortable > li {
float: left;
}
</style>
</head>
<body>
<ul class="container-sortable">
<li>
<div>List 1</div>
<ul class="item-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
<div>List 2</div>
<ul class="item-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
<div>List 3</div>
<ul class="item-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment