JS：可拖动对象速度

Question

我想放慢可拖动 HTML 对象的速度，使其成为一种惰性拖动。

有没有什么方法可以用原生实现这个功能HTML/CSS？

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

找不到任何具有如此简单功能的库..

Answer 1

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

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

我还添加了 transition CSS 属性到圆圈以便平滑移动。

这里主要是在 mousemove 事件侦听器中不连续更新圆圈位置。但是在 transition 属性的情况下，您应该每隔一段时间更新圆圈位置，以便 CSS transition 有时间平滑地制作圆圈位移动画。否则 CSS transition 动画会因 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,
   y: 0,
}
var circlePos = {
   x: getTranslateX(cirlce),
   y: getTranslateY(cirlce),
}

window.addEventListener('mouseup', e => {
   mouseDown = false;
   circlePos = {
      x: getTranslateX(cirlce),
      y: getTranslateY(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>

JS：可拖动对象速度

JS: draggable object speed

javascript

html

css

drag-and-drop

konva