在均匀的圆形运动中同时拖动单元

Question

我想实现同时移动与鼠标拖动多个div在一个均匀的圆形运动。

请看我的小提琴。问题是当我拖动Div数字"3“或"1”时，它总是将焦点放在div "2“上。此外，使用“转换”鼠标光标的位置和div的旋转时间是不匹配的。

<div class="a" id="d">
  <div class="sm-1">1</div>
  <div class="sm-2">2</div>
  <div class="sm-3">3</div>
</div>

CSS

.a {
  height: 300px;
  width: 300px;
  border: 3px solid orange;
  border-radius: 50%;
  margin: 30px auto;
  position: relative
}

.sm-1,
.sm-2,
.sm-3 {
  position: absolute;
  height: 100px;
  width: 100px;
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
}

.sm-1 {
  top: 70%;
  background: red;
}

.sm-2 {
  top: 50%;
  right: -33px;
  background: green;
}

.sm-3 {
  top: -33px;
  right: 50%;
  background: blue;
}

JS

$(document).ready(function() {

  function rotateOnMouse(e, pw, elm) {
    var offset = pw.offset();
    var center_x = (offset.left) + ($(pw).width() / 2);
    var center_y = (offset.top) + ($(pw).height() / 2);
    var mouse_x = e.pageX;
    var mouse_y = e.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 100;

    $(pw).css({
      '-moz-transform': 'rotate(' + degree + 'deg)',
      '-webkit-transform': 'rotate(' + degree + 'deg)',
      '-o-transform': 'rotate(' + degree + 'deg)',
      '-ms-transform': 'rotate(' + degree + 'deg)'
    });

    $(elm).css({
      '-moz-transform': 'rotate(-' + degree + 'deg)',
      '-webkit-transform': 'rotate(-' + degree + 'deg)',
      '-o-transform': 'rotate(-' + degree + 'deg)',
      '-ms-transform': 'rotate(-' + degree + 'deg)'
    });
  }

  $('.a').mousedown(function(e) {
    e.preventDefault();
    document.onmouseup = closeDragElement;

    document.onmousemove = function(e2) {
      rotateOnMouse(e2, $('.a'), $('div[class^=sm-]'));
    };
  });

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
});

http://jsfiddle.net/1h3ps54c/

谢谢。

Answer 1

我强烈建议您使用canvas，因为外部的计算比较复杂。

但是，我在这里提供了没有画布的解决方案：https://jsfiddle.net/mxgec1n7/

-1。在dom元素上使用offsetWidth/offsetHeight代替$.offset()，解决了闪烁问题。

-2.要正确计算旋转，您需要记住最后的旋转度：

$(document).ready(function() {
  var lastDegree=0 //degree when mousedown ended
  var currentDegree=0  //current degree as mouse moves
  var aElem=$(".a")[0]; //element
  var startDragDegree; //degree when mousedown started


  function findCenter(elem){//find center of element
    var x = (elem.offsetLeft) + (elem.offsetWidth / 2);
    var y = (elem.offsetTop) + (elem.offsetHeight / 2);
    return {x,y}
  }

  function rotateOnMouse(e, pw) {
    var center = findCenter(pw[0])
    var mouse = {x: e.pageX, y:e.pageY};
    var radians = Math.atan2(mouse.x - center.x, mouse.y - center.y);
    var currentMouseDegree = (radians * (180 / Math.PI) * -1);
    currentDegree = (currentMouseDegree-startDragDegree)+lastDegree;
    $(pw).css({
      '-moz-transform': 'rotate(' + currentDegree + 'deg)',
      '-webkit-transform': 'rotate(' + currentDegree + 'deg)',
      '-o-transform': 'rotate(' + currentDegree + 'deg)',
      '-ms-transform': 'rotate(' + currentDegree + 'deg)'
    });
  }

  $('.a').mousedown(function(e) {
    e.preventDefault();
    var mouseInitial = {x: e.pageX, y:e.pageY};    
    var center = findCenter($(".a")[0])
    var radians = Math.atan2(mouseInitial.x - center.x, mouseInitial.y - center.y);
    startDragDegree = (radians * (180 / Math.PI) * -1);

    document.onmouseup = closeDragElement;
    document.onmousemove = function(e2) {
      rotateOnMouse(e2, $('.a'));
    };
  });

  function closeDragElement() {
    lastDegree = currentDegree;
    document.onmouseup = null;
    document.onmousemove = null;
  }
});

您还可以使用这样的开箱即用解决方案：https://github.com/PixelsCommander/Propeller。