Nestable2 Issue

by joshmoto

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://dbushell.github.io/Nestable/jquery.nestable.js"></script>
<menu id="nestable-menu">
  <button type="button" data-action="expand-all">Expand All</button>
  <button type="button" data-action="collapse-all">Collapse All</button>
</menu>
<div class="cf nestable-lists">

  <div class="dd" id="nestable">
    <ol class="dd-list">

      <li class="dd-item" data-id="2"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
        <div class="dd-handle">Item 2</div>
        <ol class="dd-list">
          <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
          </li>
          <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
          </li>
          <li class="dd-item" data-id="4">
            <div class="dd-handle">Item 4</div>
          </li>
          <li class="dd-item" data-id="5"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
            <div class="dd-handle">Item 5</div>
            <ol class="dd-list">
              <li class="dd-item" data-id="6">
                <div class="dd-handle">Item 6</div>
              </li>
              <li class="dd-item" data-id="7">
                <div class="dd-handle">Item 7</div>
              </li>
              <li class="dd-item" data-id="8">
                <div class="dd-handle">Item 8</div>
              </li>
            </ol>
          </li>
          <li class="dd-item" data-id="9">
            <div class="dd-handle">Item 9</div>
          </li>
          <li class="dd-item" data-id="10">
            <div class="dd-handle">Item 10</div>
          </li>
        </ol>
      </li>
      <li class="dd-item" data-id="11">
        <div class="dd-handle">Item...

CSS

.cf:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .cf {
  zoom: 1;
}

*:first-child+html .cf {
  zoom: 1;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  margin: 0;
  padding: 1.75em;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 1.75em;
  margin: 0 0 0.6em 0;
}

a {
  color: #2996cc;
}

a:hover {
  text-decoration: none;
}

p {
  line-height: 1.5em;
}

.small {
  color: #666;
  font-size: 0.875em;
}

.large {
  font-size: 1.25em;
}

/**
 * Nestable
 */

.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 600px;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}

.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-list .dd-list {
  padding-left: 30px;
}

.dd-collapsed .dd-list {
  display: none;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}

.dd-handle {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fafafa;
  background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background: linear-gradient(top, #fafafa 0%, #eee 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.dd-handle:hover {
  color: #2ea8e5;
  background: #fff;
}

.dd-item>button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight:...

JavaScript

$(document).ready(function(e) {

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

  // activate Nestable for list 1
  var nestable = $('#nestable').nestable({
      group: 1
    })
    .on('change', function(e) {
    console.log(e);
       updateOutput(e);
    });
    
    //console.log(nestable[0].dataset);

  // activate Nestable for list 2
  $('#nestable2').nestable({
      group: 1
    })
    .on('change', updateOutput);

  // output initial serialised data
  updateOutput($('#nestable').data('output', $('#nestable-output')));
  updateOutput($('#nestable2').data('output', $('#nestable2-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');
    }
  });

  $('#nestable3').nestable();
  
  //alert(e.dragEl.html());

});