JSFiddle - React, Tailwind, and code Playground

by clairesuzy

HTML

<div id="pnlContainer" class="container">
  <img id="cropbox" src='http://i.imgur.com/RGSn9.jpg' />
      
  <div class="dragDiv" id="dragDiv">
     <div id="header" class="ui-widget-header handler">
       <a href="#" onclick="$('#dragDiv').hide();" style="float: right;">X</a>
     </div>
  
  <div id="inDragDiv">
     <textarea id="Text" name="Text"></textarea>
  </div>
 </div>
</div>

CSS

html, body {padding: 0; margin: 0; border: 0;}
.container {position: relative;}

#cropbox {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 3px;
  border: 2px solid #CCCCCC;
}

#dragDiv {
  width: 400px;
  border: 2px solid #000;
  position: relative;
  height: 68px;
  top: 9px;
  left: 9px;
}
        
#dragDiv .handler {
   float: left;
   background-color:#B2D3F5;
   cursor:move;
   width: 400px; 
   height: 22px;
   line-height: 18px;
}  

#inDragDiv {
  width: 100%;
  height: 46px;
}

#inDragDiv textarea {
  font-family:arial, sans-serif;
  font-size: 14px;  
  color: white;
  width: 100%;
  height: 46px;
  border: 0;
  padding: 0;
  margin: 0;
  *margin: -1px 0 0 0; /* ie7 only */
  overflow: auto;
  background: url(http://www.pharmacyhosting.com/media/810/transparent.gif);
}

JavaScript

$("#dragDiv").resizable({
                       handles: 'e,w,s,n,se'       
               });


 jQuery( "#dragDiv" ).draggable({ containment: "#cropbox" });