如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。