JSFiddle - React, Tailwind, and code Playground

by Digvijay Naruka

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
  <!-- https://stackoverflow.com/questions/15497383/jquery-ui-sortable-cant-drag-li-elements-in-cloned-ul -->
  <div id="random-id-34234" class="layout-grid-panel layout-grid page-active">
  <div class="first-row-level row" style="">
    <div class="row-actions">
      <i class="fa fa-bars sort-handle" title="Sort Rows">Sort Row</i>
      <i class="fa  fa-copy item-copy" title="duplicate rows">click to clone </i>
    </div>
    <div class="col-md-12">
    <div class="layout-columns column-container">
      <div class="drag-handle" title="Sort Fields">
         <div class="layout-field">
           Drag Me
        </div>
      </div>
    </div>  <!--layout-columns -->
    </div>
    <div class="col-md-12">
   <div class="layout-columns column-container">
      <div class="drag-handle">
         <div class="layout-field">
           Drag Me
        </div>
      </div>
    </div>  <!--layout-columns -->
    </div>
  </div> <!--irst-row-level -->

    <div class="first-row-level row" style="">
    <div class="row-actions">
      <i class="fa fa-bars sort-handle">Sort Row</i>
      <i class="fa  fa-copy item-copy">Click to clone</i>
    </div>
    <div class="col-md-12">
    <div class="layout-columns column-container">
      <div class="drag-handle">
         <div class="layout-field">
           Drag Me
        </div>
      </div>
    </div>  <!--layout-columns -->
    </div>
    <div class="col-md-12">
   <div class="layout-columns column-container">
      <div class="drag-handle">
         <div class="layout-field">
           Drag Me
        </div>
      </div>
    </div>  <!--layout-columns -->
    </div>
  </div> <!--irst-row-level -->
  
  </div>

CSS

.layout-grid-panel{
    height: 100%; 
   background: #fff;
   width: 100%;
}
.layout-grid-panel > div {
  box-sizing: border-box;
}
.first-row-level{
  width: 100%;
  min-height: 60px;  
  background: #333;
  margin-bottom: 20px;
  position: relative;
}
.row-actions{
   width: 24px;
}
.row-actions i{
 padding 5px;
  z-index: 10;
 color: white;
 position: absolute;
 left: 24px;
 /* background: black; */

}
.ui-placeholder{
  background: #f87;
}
.row-actions .fa-bars{
   /* background: blue; */
  border: 1px solid #000;
}
.row-actions .fa-copy{
  /* left: 0; */
  
  top: 30px;
  color: white;
  /* background: blue; */
  border: 1px solid #000;
}

.row .layout-columns:after{
  clear: both;
  display: block;
  content: "";
}
.row .layout-columns{
  padding: 10px;
  border: 2px dashed green;
  min-height: 20px;
  width: 40%;
  margin-right: 50%;
  margin: 20px auto;
  /* margin: auto; */
}
.layout-field{
  background: white;
}

JavaScript

$(".layout-grid-panel").sortable({
  cursor: "not-allowed",
  connectWith: "",
  handle: ".row-actions .sort-handle",
  placeholder: "ui-placeholder",
  stop: function(e, ui) {
  },
  start: function(e, ui) {
    ui.placeholder.height(ui.item.height());
  }
});
$( ".layout-grid-panel" ).disableSelection();
var colSortableOptions={
  cursor: "move",

  items : '.layout-field',
  connectWith: ".column-container",
  placeholder: "ui-placeholder",
  stop: function(e, ui) {
  },
  start: function(e, ui) {
    ui.placeholder.height(ui.item.height());
  }
} ;
$(".layout-columns").sortable(colSortableOptions);
$('.layout-columns').disableSelection();

$('body').on('click', '.row-actions .item-copy', function(e) {
	var clone= $(this).closest(".first-row-level").clone();
 	clone.find('.layout-columns').sortable(colSortableOptions).disableSelection();
  $('.layout-grid-panel').append(clone);
  //$(".layout-columns").sortable("refresh");
});