jquery drag and drop nested working

by Simplybj

HTML

<div class="sortable">
  <div class="panel panel-info form-elements element" id="field1">
    <div class="panel-heading"><span class="name">Field 1</span></div>
    <div class="panel-body">&nbsp;</div>
  </div>
  <div class="panel panel-info form-elements element" id="field2">
    <div class="panel-heading"><span class="name">Field 2</span></div>
    <div class="panel-body">&nbsp;</div>
  </div>
  <div class="panel panel-info form-elements sections" id="section1">
    <div class="panel-heading"><span class="name">Section 1</span></div>
    <div class="panel-body sortable">&nbsp;</div>
  </div>
  <div class="panel panel-info form-elements sections" id="section2">
    <div class="panel-heading"><span class="name">Section 2</span></div>
    <div class="panel-body sortable">&nbsp;</div>
  </div>
</div>

CSS

.panel-heading {
  cursor: move;
}

.form-elements {
  background-color: green;
  padding: 7px;
  margin: -7px 0 7px 0;
  border-radius: 3px;
  border: 4px solid white;
  color: white;
}

.form-elements:hover {
  border: 4px solid darkgreen;
}

.ui-state-hover {
  background: lightgreen;
  border-style: dashed;
  height: 50px;
  margin-bottom: 7px
}

.panel-body {
  background-color: white;
  color: black;
  margin: 5px;
  padding: 0 5px 5px 5px;
}

JavaScript

$(function($) {
  var panelList = $('.sortable');
  panelList.sortable({
    handle: '.panel-heading',
    connectWith: '.sortable',
    placeholder: 'ui-state-hover'
  });
});