An extension of Sortable.js Cobler allows for visual manipulation and Building of a JSON object that can be used to describe Content.
Comes pre-built for content building and form building.
<!DOCTYPE html>
<html>
<head>
<style src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'></style>
<script src='//twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script type='text/javascript' src='assets/js/cob.js'></script>
<script type='text/javascript' src='assets/js/content.cob.js'></script>
<script type="text/javascript">
cb = new Cobler({ disabled: false, targets: document.getElementsByClassName('widget_container'), items:data})
cb.addSource(document.getElementById('sortableList'));
</script>
</head>
<body>
<div class="myForm">
</div>
</body>
</html>
Drag this box ^ onto the target ->