JSFiddle - React, Tailwind, and code Playground

by princefiddle

HTML

<script src="http://boedesign.com/demos/imagetick/js/jquery.imagetick.min.js"></script>
<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;
}

JavaScript

$(document).ready(function(){
	     var selected = $([]), offset = {top:0, left:0}; 
	 	 $( "#dialog-form" ).dialog({
		  autoOpen: false,
     	 height: 300,
     	 width: 350,
     	 modal: true,
     	 buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
		    divstr1="<div class='dr' id='"+divid+"'>"+divid+"</div>";
            divstr2="<input type='radio' value='php' id='php' name='favlang' />";
            divstring=divstr1+divstr2;
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
           
            $("#divdata option[value="+ divid+"]").remove();
			$("#"+divid).draggable({
				 containment: "."+section,
				 grid: [ 10, 10 ],
				  start: function(ev, 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",
				});
			}
		});
		
       $("input[name='favlang']").imageTick({
			tick_image_path: "http://keyss.in/smartmenu_admin_dev/v1.5/images/check-box.png", 
			no_tick_image_path:"http://keyss.in/smartmenu_admin_dev/v1.5/images/uncheck-box.png",
			image_tick_class: "radios"
		});
		
      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
       
      }
   ...