通过预定义的鼠标坐标在屏幕上移动元素

Question

我一直在尝试移动诸如div的元素，该元素具有css的圆形球。现在我正在做什么，我已经实现了使用给定的奇点的clientX和clientY值在屏幕上移动球。例如（200,200）。但是然后我必须将它们排列成数组，所以当我这样做时，我仍然可以这样做。我过去了三点，例如： e.clientX = [0,600,0] e.clientY = [0,300,0] 现在，使用for循环逐个迭代这些点。但是出现的问题是我无法提供适当的动画来查看球在屏幕上的运动。对于这些coors，球刚好移回0,0，我的意思是它也通过了600,300，我也可以在控制台上看到，但是我看不到正确的球运动，我必须看到它就像到达600,300，然后又回到0 ，0，我可以看到它的运动。我希望你们得到它并帮助我吗？

$(document).on("click", ".box", function(e) {
  var arr = [];
  var arr2 = [];
  var x;
  var y;
  var count = 0;
  var px;
  var py;
  e.clientX = [0, 600, 0];
  e.clientY = [0, 300.0];
  for (i = 0; i <= 1; i++) {
    if (i == 0) {
      px = x = e.clientX[i];
      py = y = e.clientY[i];
      count++;
      console.log(px, py);
      console.log(count);
    } else if (
      i == 1 &&
      e.clientX[count - 1] == px &&
      e.clientY[count - 1] == py
    ) {
      px = x = e.clientX[i];
      py = y = e.clientY[i];
      count++;
      console.log(px, py);
      console.log(count);
    } else if (
      i == 2 &&
      e.clientX[count - 1] == px &&
      e.clientY[count - 1] == py
    ) {
      px = x = e.clientX[i];
      py = y = e.clientY[i];
      count++;
      console.log(px, py);
      console.log(count);
    }

    //second ite

    var newposX = x - 60;
    var newposY = y - 60;
    $(".circle").css(
      "transform",
      "translate3d(" + newposX + "px," + newposY + "px,0px)"
    );
  }
});

这是屏幕截图和codepen。