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.


Basic Usage

<!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 ->

Drop Target