JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.js"></script>
<div id="rotation">zero</div>
<div style="position:absolute;height:100px;width:100px;background-color:orange;cursor:pointer;left:200px;top:200px" id="target" class="draggable"><div style="height:5px;width:5px;background-color:red"></div></div>

JavaScript

$.fn.rotateAble = function() {
	var offset = null;
	var dragging = false;
	
	var RotationTarget = $(this); // Save target, cause $(this) doesn't work from MouseUp and MouseMove
	
	// Mouse
	var MouseDown = function(e) {
		dragging = true;

		offset = {
			x: e.pageX,
			y: e.pageY
		};
		$("div#rotation").text("MouseDown");
	};
	var MouseUp = function() {
		dragging = false;
		$("div#rotation").text("MouseUp");
    };
    var MouseMove = function(e) {
    	var mouse_x = e.pageX - offset.x;
		var mouse_y = e.pageY - offset.y;
    	//$("div#rotation").text("Move: " + mouse_x + " " + mouse_y);
		if (dragging) {
			
			var radians = Math.atan2(mouse_x, mouse_y);
			var degree = (radians * (180 / Math.PI) * -1) + 90;
			RotationTarget.rotate(degree);
			
			//$("div#rotation").text(degree);
		}
	};

	// Touch
	var TouchStart = function(e) {
		var orig = e.originalEvent;
		var pos = $(this).position();

		offset = {
			x: orig.changedTouches[0].pageX,
			y: orig.changedTouches[0].pageY
		};
	};
	var TouchMove = function(e) {
		e.preventDefault();
		var orig = e.originalEvent;

		var mouse_x = orig.changedTouches[0].pageX - offset.x;
		var mouse_y = orig.changedTouches[0].pageY - offset.y;

		var radians = Math.atan2(mouse_x, mouse_y);
		var degree = (radians * (180 / Math.PI) * -1) + 90;
		$(this).rotate(degree);
		//$("div#rotation").text(degree);
	};
	
	this.bind("touchstart", TouchStart);
	this.bind("touchmove", TouchMove);
	$(this).bind("mousedown", MouseDown);
	$(document).bind("mouseup", MouseUp);
	$(document).bind("mousemove", MouseMove);
};
 
$(".draggable").rotateAble();