Почему вращение div с помощью мыши не работает javascript? - PullRequest
Новая
       66

Почему вращение div с помощью мыши не работает javascript?

0 голосов
/ 16 марта 2020

Я хочу, чтобы div вращался от 0 до 360 без -. Вращение должно go по часовой стрелке от 0 до 360 град. В этом коде он колеблется от 0 до 180 и от -180 до 0.

Второй вопрос: каждый раз, когда я нажимаю на "вращатель div", моя позиция меняется ???

Код: 

document.getElementById("rotator").addEventListener('mousedown', mouseDownRotator, false);


function mouseDownRotator(e) {
  window.addEventListener("mousemove", mouseMoveRotator, true);
}

function mouseMoveRotator(e) {

  window.addEventListener('mouseup', mouseUpRotator, true);
  var arrow = document.getElementById("rotator");
  var arrowRects = document.getElementById("dragdiv").getBoundingClientRect();
  var center_x = (arrowRects.left) + (arrowRects.width / 2);
  var center_y = (arrowRects.top) + (arrowRects.height / 2);
  var mouse_x = e.pageX;
  var mouse_y = e.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  document.getElementById("dragdiv").style.transform = "rotate(" + (radians * (180 / Math.PI) * -1) + 90 + "deg)";
}

function mouseUpRotator() {
  window.removeEventListener("mousemove", mouseMoveRotator, true);


}
#dragdiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  margin: 250px;
}

#rotator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 3px solid #4286f4;
  position: absolute;
  top: -50px;
  right: 43%;
  cursor: nwse-resize;
}
<div id="container">
  <div id="dragdiv"></div>
</div>
...