JSFiddle - React, Tailwind, and code Playground

by pheonix0109

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery-ui-1.10.4.custom.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable2.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/bootstrap.min.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery-ui-1.10.4.custom.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable2.js"></script>
<div class="row">
<div class="col-md-6">
  <div class="card">
    <div class="card-body">
      <div id="wrapper">
        <div class="panel-group" id="accordion">
        </div>
        <div class="dd" id="nestable">
          <ol class="dd-list outer">
            <li class="dd-item dd3-item" data-id="1">
              <div class="dd-handle dd3-handle">Drag</div>
              <div class="dd3-content" name="1">
                Item 1
                <span class="label label-default">New
                </span>
              </div>

            </li>
          </ol>
        </div>
        <div id="nestable-menu">
          <button type="button" class="btn btn-default" id="appendnestable">
            <i class="fa fa-magic"></i>
            Add
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6">
  <p>
    <pre...

JavaScript

var updateOutput = function(e) {
  var list = e.length ? e : $(e.target),
    output = list.data('output');
  if (window.JSON) {
    output.html(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
  } else {
    output.html('JSON browser support required for this demo.');
  }
};

$('#nestable').nestable({
    group: 1
  })
  .on('change', updateOutput);

updateOutput($('#nestable').data('output', $('#nestable-output')));

$('#nestable-menu').on('click', function(e) {
  var target = $(e.target),
    action = target.data('action');
  if (action === 'expand-all') {
    $('.dd').nestable('expandAll');
  }
  if (action === 'collapse-all') {
    $('.dd').nestable('collapseAll');
    $('.content:visible').slideUp();
  }
});

$(function() {
  var nestablecount = 2;
  $('#appendnestable').click(function() {
    $('ol.outer').append('<li class="dd-item dd3-item" data-id="' + nestablecount +
      '"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="' + nestablecount + '">Item ' + nestablecount + '</div><div id="c-' +
      nestablecount + '" class="content"><form role="form-' + nestablecount +
      '"><div class="form-group"><label for="name">Name</label><input type="text" class="form-control" id="name" placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet"></textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div></div></form></div></li>'
    );
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    nestablecount++;
  });
});