JS：可拖动对象的速度

问题描述

我想放慢可拖动HTML对象的速度，使其变得有点延迟。

是否可以通过本机HTML / CSS来实现此功能？

或者可能存在一些具有这种能力的现有JS库？

找不到任何具有这种简单功能的库。

解决方法

我提出了一种可能的解决方案，但也没有忘记分享;）

重点是在mousemove事件上将鼠标位置应用于圆上，以模拟拖动效果。

我还为圆形添加了transition CSS属性，以实现平滑移动。

这里的主要目的是在mousemove事件侦听器中不连续地更新圆的位置。但是，如果使用transition属性，则应以一定的间隔更新圆的位置，以使CSS transition有时间平滑地设置圆的位移动画。否则，transition事件的持续更新会导致CSS mousemeove动画超载，并出现毛刺。

var cirlce = document.querySelector('.circle');

function getTranslateX(myElement) {
   var style = window.getComputedStyle(myElement);
   var matrix = new WebKitCSSMatrix(style.webkitTransform);
   return matrix.m41; // 'm41' is translateX position
}

function getTranslateY(myElement) {
   var style = window.getComputedStyle(myElement);
   var matrix = new WebKitCSSMatrix(style.webkitTransform);
   return matrix.m42; // 'm42' is translateY position
}

var mouseDown = false;
var mousePos = {
   x: 0,y: 0,}
var mouseLastPos = {
   x: 0,}
var circlePos = {
   x: getTranslateX(cirlce),y: getTranslateY(cirlce),}

window.addEventListener('mouseup',e => {
   mouseDown = false;
   circlePos = {
      x: getTranslateX(cirlce),}
});
window.addEventListener('mousedown',e => {
   mouseDown = true;
   mouseLastPos.x = e.clientX;
   mouseLastPos.y = e.clientY;
});
window.addEventListener('mousemove',e => {
   mousePos.x = e.clientX;
   mousePos.y = e.clientY;
   if (mouseDown) {
      // cirlce.style.transform = 'translateX('+(mousePos.x-mouseLastPos.x+circlePos.x)+'px) translateY('+(mousePos.y-mouseLastPos.y+circlePos.y)+'px)'; // doesn't work with 'transition' CSS property
   }
});

// main trick here to make 'transition' work properly
setInterval(() => {
   if (mouseDown) {
      cirlce.style.transform = 'translateX('+(mousePos.x-mouseLastPos.x+circlePos.x)+'px) translateY('+(mousePos.y-mouseLastPos.y+circlePos.y)+'px)';
   }
},50);

.circle {
   position: absolute;
   width: 100px;
   height: 100px;
   top: 0;
   left: 0;
   background-color: red;
   border: 2px solid black;
   border-radius: 50%;
   transform: translateX(5px) translateY(5px);
   transition: transform 0.3s;
}

<div class="circle"></div>