JSFiddle - React, Tailwind, and code Playground

by princefiddle

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="<div class='dr' id='dr1'>Div1</div>">Div1</option>
    <option value="<div class='dr' id='dr2'>Div2</div>">Div2</option>
    <option value="<div class='dr' id='dr3'>Div3</div>">Div3</option>
    <option value="<div class='dr' id='dr4'>Div3</div>">Div4</option>
    <option value="<div class='dr' id='dr5'>Div4</div>">Div5</option>
    <option value="<div class='dr' id='dr6'>Div5</div>">Div6</option>
    <option value="<div class='dr' id='dr7'>Div6</div>">Div7</option>
    <option value="<div class='dr' id='dr8'>Div7</div>">Div8</option>
    <option value="<div class='dr' id='dr9'>Div8</div>">Div9</option>-->
    <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="bill_print">Bill Print Master</div>

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

<div class="bill_print_input">
<label>
    <select>
        <option selected> Bill Format 1</option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>
</div>
    <div class="bill_print_right">Selected bill format: </div>
</div>

</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;
	}

JavaScript

$(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+"'>Div1</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $( "."+section).selectable();
            $("#divdata option[value="+ divid+"]").remove();
			$("#"+divid).draggable({
				 containment: "."+section,
				 grid: [ 10, 10 ],
				 start: function(e, ui) {
				 },
				stop: function(e, ui) {  
					 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",
				});
			}
		});
		
		
      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
       
      }
    });
$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});
	
//set absoute for all div
$("div[class^='paper']").css({
           // position: "absolute",
    });
 	height=$(".paper-area").height();
   ...