JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head><title>JSFiddle draggable-rotatable-with-cover</title></head>
<body>
    <div id="container">
        <div id="over">
            <div id="image">
                <img src="http://i.imgur.com/9OJPi.png" />
            </div>
            <div id="template">
            </div>
            <div id="overlay">
            </div>    
        </div>
    </div>
    <a href="#" id="rotate_photo">Rotate</a>
</body>
</html>

CSS

#container {
   display: block;
    height: 300px;
}
#rotate_photo { z-index: 99; }

#image {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 300px;  
  overflow: hidden;    
}
#template {
  z-index: 2;
  position: absolute;
  background-image: url('http://i.imgur.com/Z0wYR.png');
  width: 400px;
  height: 300px;    
    }
#overlay {
  position: absolute;
  z-index: 3;
  border: 3px solid red;
  width: 394px;
  height: 294px;   
}

JavaScript

// Dragging works perfectly when the image is unrotated/vertical,
// but rotating the image 90 degrees then causes dragging to 
// 'jerk' whenever you click on the image to drag it. Help?

$(document).ready(function() {
    window.rotation = 0;
    $('#rotate_photo').bind('click', rotateImage);
    $('#overlay').draggable();
    $('#overlay').bind('drag', reflectDrag);
});
function rotateImage() {
    window.rotation = window.rotation - 90;
    if (window.rotation == -360) {
        window.rotation = 0;
    }
    $('#image img').rotate(window.rotation); 
    $('#overlay').rotate(window.rotation);    
}
function reflectDrag(event, ui) {
    $('#image img').css('margin-top', ui.position.top);
    $('#image img').css('margin-left', ui.position.left);
}