Skip to content

Instantly share code, notes, and snippets.

@ericcholis

ericcholis/gist:8606045

Created January 24, 2014 20:46
Show Gist options
  • Save ericcholis/8606045 to your computer and use it in GitHub Desktop.
Save ericcholis/8606045 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Sortable
Raw
gistfile1.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery Sortable</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
</head>
<body>
<header>
<h1>jQuery Sortable</h1>
</header>
<ol class="nested_with_switch vertical">
<li data-name="Item 1">Item 1</li>
<li data-name="Item 2">Item 2</li>
<li data-name="Item 3">Item 3</li>
<li data-name="Item 4">
Item 4
<ol>
<li data-name="Item 4.1">Item 4.1</li>
<li data-name="Item 4.2">Item 4.2</li>
<li data-name="Item 4.3">Item 4.3</li>
<li data-name="Item 4.4">Item 4.4</li>
<li data-name="Item 4.5">Item 4.5</li>
<li data-name="Item 4.6">Item 4.6</li>
</ol>
</li>
<li data-name="Item 5">Item 5</li>
<li data-name="Item 6">Item 6</li>
</ol>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="js/jquery.sortable.js"></script>
<script>
$(function() {
var oldContainer
$("ol.nested_with_switch").sortable({
group: 'nested',
afterMove: function (placeholder, container) {
if(oldContainer != container){
if(oldContainer){
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
}
},
onDrop: function (item, container, _super) {
container.el.removeClass("active");
_super(item);
console.log(JSON.stringify($("ol.nested_with_switch").sortable("serialize").get()));
},
serialize: function ($parent, $children, parentIsContainer) {
var result = $.extend({}, $parent.data());
if (parentIsContainer){
return $children;
} else if ($children[0]){
result.children = $children;
}
delete result.subContainer;
delete result.sortable;
return result;
}
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment