Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <p>degrees</p>
  
  <div id="mainTarget">
<img src="http://myreaxns.com/wp-content/uploads/2013/03/priyanka-chopra-image.jpg" width="300" class="mainTarget" />
<div id="target">&nbsp;</div>
</div>
  
  
</body>
</html>
 
var dragging = false;
$(function() {
    var target = $('#target');
    var mainTarget = $('#mainTarget');
    var rad = mainTarget.width()/2;
    var elOfs = mainTarget.offset();
    var elPos = {
       x: elOfs.left,
       y: elOfs.top
    };
    target.mousedown(function() {
        dragging = true;
    });
    $(document).mouseup(function() {
        dragging = false;
    });
    $(document).mousemove(function(e) {
      var mPos = {
        x: e.pageX-elPos.x,
        y: e.pageY-elPos.y
      };
      var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad);
      var getDeg = -getAtan/(Math.PI/180) + 135;  //135 = (180deg-45deg)
      
      $('p').text(getDeg);
      
        if (dragging) {
            mainTarget.css({transform: 'rotate(' + getDeg + 'deg)'});
        }
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers