JSFiddle - React, Tailwind, and code Playground

by bobbyfrancisjoseph

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="outer" >
 
        <div id = "inner">
        </div>
        
        <div id="point">
        </div>

</div>

CSS

#outer
{
    background-color:#CF3;
    
    position:relative;
    width:400px;
    height:300px;
    top:100px;
    left:100px;
}

#inner
{
  position:relative;
  width:100px;
  height:50px;
  background-color:#CCC;
 
  top: 0px;
  left:0px;
  
 
}
#point
{
  position:absolute;
  width:10px;
  height:10px;
  background-color:#930;
 
  top:0px;
  left:0px;
  
 
}

JavaScript

$(document).ready(function() {
                      
           $("#inner" ).draggable();
           $("#outer").rotate(40);
               
               
           $('#inner').draggable({
                // get the initial X and Y position when dragging starts
                start: function(event, ui) {
                  xpos = ui.position.left;
                  ypos = ui.position.top;
                },
                // when dragging stops
                stop: function(event, ui) {
                  // calculate the dragged distance, with the current X and Y position and the "xpos" and "ypos"
                  var xmove = ui.position.left - xpos;
                  var ymove = ui.position.top - ypos;
            
                  // define the moved direction: right, bottom (when positive), left, up (when negative)
                  var xd = xmove >= 0 ? ' To right: ' : ' To left: ';
                  var yd = ymove >= 0 ? ' Bottom: ' : ' Up: ';
                    
                               
                  
            
                  alert('The DIV was moved,\n\n'+ xd+ xmove+ ' pixels \n'+ yd+ ymove+ ' pixels');
                }
              });    
               
});