JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<button id="click">Test</button>
<button id="angle_click">Angle</button>
<div id="content">
<div id="line"></div>
    <div id="angle"></div>
</div>

CSS

#line 
{
  width: 3px;
  height: 100px;
//  border:1px solid black;
  background-image: url(http://i571.photobucket.com/albums/ss154/mdreiff/line-3-100_1.gif);
}

#angle {
 width: 100px;
 height: 100px;    
 background-image: url(http://i571.photobucket.com/albums/ss154/mdreiff/angle-100.png);
}

JavaScript

//var rotation = 0;
$('#click').click(function() { 
  var insertedImage = $('#line').clone();
  var resized = insertedImage.resizable({handles: 'n, s'});
 var dragged = insertedImage.draggable();
  var data = insertedImage.data( "deg", 0 );   
   var clicked = insertedImage.click(function() {      
       $(this).data( "deg", $(this).data( "deg" )+5 );
       $(this).rotate($(this).data( "deg" ));  
  });           
  insertedImage.appendTo($('#content'));    
    });

$('#angle_click').click(function() { 
  var insertedImage = $('#angle').clone();
  var resized = insertedImage.resizable({handles: 'nw, ne, sw,se'});
 var dragged = insertedImage.draggable();
  var data = insertedImage.data( "deg", 0 );   
   var clicked = insertedImage.click(function() {      
       $(this).data( "deg", $(this).data( "deg" )+5 );
       $(this).rotate($(this).data( "deg" ));  
  });           
  insertedImage.appendTo($('#content'));    
    });



jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};