title: Rotate div on mouse move on rotate pointers
body: <p>I have one HTML <code>div</code> and two rotate pointers on the left and right side. When I try to click any of the rotate pointers and rotate the div then it's not working properly. It starts to rotate, but after some position mousemove event stops firing. The div should be rotatable to 360 degrees.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) &amp;&amp; (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);
    }
  });*/</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="control-box"&gt;
    &lt;div class='resizers'&gt;
      &lt;div class='resizer top-left'&gt;&lt;/div&gt;
      &lt;div class='resizer top-right'&gt;&lt;/div&gt;
      &lt;div class='resizer bottom-left'&gt;&lt;/div&gt;
      &lt;div class='resizer bottom-right'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ob-left-rotate rotate-ob-item rotatetool"&gt;&lt;/div&gt;
    &lt;div class="ob-right-rotate rotate-ob-item rotatetool"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the jsfiddle link: <a href="https://jsfiddle.net/jignesh221290/fy1qxvec/13/" rel="nofollow noreferrer">https://jsfiddle.net/jignesh221290/fy1qxvec/13/</a></p>