当前位置：首页 > JavaScript

js实现推拉

2026-02-02 01:05:22JavaScript

实现推拉效果的 JavaScript 方法

监听鼠标或触摸事件
通过 mousedown、mousemove、mouseup 或 touchstart、touchmove、touchend 事件捕获用户交互。记录初始位置和位移量，实时更新元素坐标。

let isDragging = false;
let startX, startY;

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - element.offsetLeft;
  startY = e.clientY - element.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  element.style.left = `${e.clientX - startX}px`;
  element.style.top = `${e.clientY - startY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

使用 CSS Transform 优化性能
通过 transform: translate() 代替直接修改 left/top，减少重排开销，提升动画流畅度。

element.style.transform = `translate(${offsetX}px, ${offsetY}px)`;

添加惯性滑动效果
计算释放时的速度，通过 requestAnimationFrame 实现减速动画。根据速度衰减系数逐步减少位移。

let velocityX = 0, velocityY = 0;
let lastX = 0, lastY = 0;

// 在 mousemove 中记录速度
velocityX = e.clientX - lastX;
velocityY = e.clientY - lastY;
lastX = e.clientX;
lastY = e.clientY;

// 释放后惯性滑动
function animate() {
  velocityX *= 0.95;
  velocityY *= 0.95;
  element.style.transform += `translate(${velocityX}px, ${velocityY}px)`;
  if (Math.abs(velocityX) > 0.1 || Math.abs(velocityY) > 0.1) {
    requestAnimationFrame(animate);
  }
}

边界限制处理
检查元素是否超出容器范围，通过 Math.max/min 限制最终位置。

const maxX = container.offsetWidth - element.offsetWidth;
const maxY = container.offsetHeight - element.offsetHeight;
offsetX = Math.max(0, Math.min(offsetX, maxX));
offsetY = Math.max(0, Math.min(offsetY, maxY));

使用第三方库简化实现
若需快速实现，可选用现成库如：

js实现推拉