用鼠标旋转div旋转指针

Question

我有一个HTML div，在左侧和右侧有两个旋转指针。当我尝试单击任何旋转指针并旋转div时，则它无法正常工作。它开始旋转，但是在某个位置后mousemove事件停止触发。 div应该可以旋转到360度。

var img = $('.rotatetool');
var divControl = $('.control-box');
//divControl.hide();
var offset = img.offset();
var mouseDown = false;
var cssOnlyCanvasHeight = 325;
var cssOnlyCanvasWidth = 450;
var backstoreOnlyCanvasHeight = 650;
var backstoreOnlyCanvasWidth = 900;
var posX, posY;
var controlBorderWidth = 1;

function mouse(e) {
  console.log("mouseDown", mouseDown);
  if (mouseDown) {
    console.log(e);
    if ((e.clientX) && (e.clientY)) {
      posX = e.clientX;
      posY = e.clientY;
    } else if (e.originalEvent.touches) {
      posX = e.originalEvent.touches[0].clientX;
      posY = e.originalEvent.touches[0].clientY;
      e.preventDefault();
    }

    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var radians = Math.atan2(posX - center_x, posY - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    divControl.css('-moz-transform', 'rotate(' + degree + 'deg)');
    divControl.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    divControl.css('-o-transform', 'rotate(' + degree + 'deg)');
    divControl.css('-ms-transform', 'rotate(' + degree + 'deg)');
  }
}

img.on('click', function(e) {
  e.preventDefault();
  mouseDown = true;
});

img.on('mousedown touchstart', function(e) {
  e.preventDefault();
  mouseDown = true;
});

$(document).on('mouseup touchend', function(e) {
  e.preventDefault();
  mouseDown = false;
})
img.on('mousemove', function(e) {
  e.preventDefault();
  mouse(e);
});
/* img.on('touchmove', function(e) {
  e.preventDefault();
  if (mouseDown) {
    mouse(e);
  }
});*/

.marker {
  background: #ED1C24;
  height: 2px;
  right: 0;
  position: absolute;
  top: 35px;
  width: 7px;
  display: none;
}

.pointer {
  display: none;
  height: 72px;
  position: absolute;
  top: 40px;
  width: 72px;
  border: 1px solid red;
  left: 310px;
  z-index: -99;
}

.control-box {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #00b6c9;
  margin: 0 auto;
  top: 100px;
  left: 100px;
  box-sizing: border-box;
  z-index: 99;
}

.control-box .resizers {
  width: 100%;
  height: 100%;
}

.control-box .resizers .resizer {
  width: 15px;
  height: 15px;
  background: #00b6c9;
  position: absolute;
}

.control-box .resizers .resizer.top-left {
  left: -10px;
  top: -10px;
  cursor: nwse-resize;
  /*resizer cursor*/
}

.control-box .resizers .resizer.top-right {
  right: -10px;
  top: -10px;
  cursor: nesw-resize;
}

.control-box .resizers .resizer.bottom-left {
  left: -10px;
  bottom: -10px;
  cursor: nesw-resize;
}

.control-box .resizers .resizer.bottom-right {
  right: -10px;
  bottom: -10px;
  cursor: nwse-resize;
}

.control-box .rotate-ob-item {
  position: absolute;
  width: 21px;
  height: 24px;
  background: url('http://dlt-customizer.azurewebsites.net/image/rotate_tool.png') no-repeat center center transparent;
  cursor: pointer;
}

.control-box .ob-left-rotate {
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.control-box .ob-right-rotate {
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="control-box">
  <div class='resizers'>
    <div class='resizer top-left'></div>
    <div class='resizer top-right'></div>
    <div class='resizer bottom-left'></div>
    <div class='resizer bottom-right'></div>
  </div>
  <div class="ob-left-rotate rotate-ob-item rotatetool"></div>
  <div class="ob-right-rotate rotate-ob-item rotatetool"></div>
</div>

这是jsfiddle链接：https://jsfiddle.net/jignesh221290/fy1qxvec/13/