移动端弹性拖拽js

移动端弹性拖拽是一种常见的交互效果，它允许用户通过触摸屏幕来拖动元素，并且在释放时元素会有一个弹性回弹的效果。这种效果可以提升用户体验，使得操作更加自然和流畅。

基础概念

弹性拖拽主要涉及以下几个概念：

触摸事件：包括 touchstart、touchmove 和 touchend。
惯性模拟：通过计算释放时的速度来模拟物理惯性效果。
缓动函数：用于实现平滑的动画效果，常见的缓动函数有 easeOutQuad、easeOutCubic 等。

类型

简单拖拽：基本的拖动功能，无弹性效果。
弹性拖拽：拖动结束后元素会有回弹效果。
惯性拖拽：结合惯性模拟，释放后元素会继续移动一段距离。

应用场景

列表项排序：在列表中拖动项目进行重新排序。
悬浮窗：实现可拖动的悬浮窗口或提示框。
游戏互动：在游戏中实现物体的拖动和投掷效果。

示例代码

以下是一个简单的移动端弹性拖拽的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性拖拽示例</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    position: absolute;
    touch-action: none; /* 禁用浏览器默认的触摸行为 */
  }
</style>
</head>
<body>
<div id="draggable"></div>
<script>
  const draggable = document.getElementById('draggable');
  let startX, startY, initialX, initialY;

  draggable.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    startX = touch.clientX;
    startY = touch.clientY;
    initialX = draggable.offsetLeft;
    initialY = draggable.offsetTop;
  });

  draggable.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const deltaX = touch.clientX - startX;
    const deltaY = touch.clientY - startY;
    draggable.style.left = `${initialX + deltaX}px`;
    draggable.style.top = `${initialY + deltaY}px`;
  });

  draggable.addEventListener('touchend', (e) => {
    e.preventDefault();
    const velocityX = (draggable.offsetLeft - initialX) / 100;
    const velocityY = (draggable.offsetTop - initialY) / 100;
    const friction = 0.9;
    let posX = draggable.offsetLeft;
    let posY = draggable.offsetTop;

    const animate = () => {
      posX += velocityX;
      posY += velocityY;
      velocityX *= friction;
      velocityY *= friction;
      draggable.style.left = `${posX}px`;
      draggable.style.top = `${posY}px`;

      if (Math.abs(velocityX) > 0.1 || Math.abs(velocityY) > 0.1) {
        requestAnimationFrame(animate);
      }
    };

    animate();
  });
</script>
</body>
</html>