JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog-form" title="Add fields in Section">
  <p class="validateTips">All form fields are required.</p>
   <div class="add_new">Add</div>
   <input type="text" id="new_field"/>
   <div id="save_new">save</div> 
  <form>
  <fieldset>
  <label for="divdata">Divs</label>
  <select name="divdata" id="divdata">
   
    <option value="dr1">Div1</option>
    <option value="dr2">Div2</option>
    <option value="dr3">Div3</option>
    <option value="dr4">Div4</option>
    <option value="dr5">Div5</option>
   
  </select>
      
      </br>
      
  <label for="section">Section</label>
<select name="section" id="section">
    <option value="paper-area">Header</option>
    <option value="paper-area-detail">Detail</option>
    <option value="paper-area-qty">Items</option>
    <option value="paper-area-sub">Total</option>
    <option value="paper-area-footer">Footer</option>
</select>

  </fieldset>
  </form>
</div>

<div class="main_bg">


<div class="bill_top_row">


<div class="headet-top-right">

</div>
<div class="bill_top_line"></div>

<div class="textarea-top">

<div class="textarea-field">
<div class="field-icon add"><a href="#"><img src=""  alt ="add"border="0" width="29" height="25" /></a></div>

</div>


<div class="paper-area bg_section" id="paper_area">


</div>


<div class="paper-area-detail bg_section">



</div>

<div class="paper-area-qty bg_section">

</div>

<div class="paper-area-sub bg_section">

</div>

<div class="paper-area-footer bg_section"></div>

</div>

CSS

.dr {
    background: none repeat scroll 0 0 #63F;
    color: #7B7B7B;
    height: 50px;
    
    text-shadow: 1px 1px 2px #FFFFFF;
    width: 50px;
	position:absolute;
	}
.bg_section {
    border: 1px solid #E4E3E3;
    height: 290px;
    margin: 48px auto 0;
    position: relative;
    width: 400px;
}
 .ui-selecting {background: #FECA40;}
 .ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

JavaScript

var selected = $([]); 	// list of selected objects
var lastselected = '';	// for the shift-click event


$(document).ready(function(){
	    
	 	 $( "#dialog-form" ).dialog({
		  autoOpen: false,
     	 height: 300,
     	 width: 350,
     	 modal: true,
     	 buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
		    divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $("#divdata option[value="+ divid+"]").remove();
			$("#"+divid).draggable({
				 containment: "."+section,
				 grid: [ 10, 10 ],
				 start: function(ev, ui) {
				$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
				selected = $(".ui-selected").each(function() {
					$(this).addClass("dragging");
				});
			},
			drag: function(ev, ui) {
				
			},
				stop: function(e, ui) {  
                    selected.each(function() {
					$(this).removeClass("dragging");
				    });
                    
                    
                    
					 var Stoppos = $(this).position();
					 var leftPos=Stoppos.left;
					 var topPos= Stoppos.top;
					 var dragId=ui.helper[0].id;
					// alert(leftPos/10);
					// alert(topPos/10);
					 // alert(dragId);
					sectionWidth= $('#'+dragId).parent().width();
					sectionHeight = $('#'+dragId).parent().height();
			 	 },
		  }).resizable({
		  	 containment: "."+section,
		  	 grid: [10,10],
		  	 start: function(e, ui) {
		  		 // alert($(".paper-area").width());
				//containment: ".paper-area",
				$(this).css({
				//  position: "absolute",
				 });
			},
			stop: function(e, ui) {
		  		 // containment: ".paper-area",
				$(this).css({
				//   position: "absolute",
				});
			}
		});
		$("#paper_area").selectable();
		
      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close:...