Vue 拖拽指令，如何模拟苹果触控球停靠效果？

2024-02-17 12:59:13

Vue拖拽指令——模拟苹果触控球停靠

入门：创建拖拽指令

首先，我们需要创建一个拖拽指令。这是一个 Vue.js 指令，可以让我们轻松地将拖拽功能添加到任何元素中。指令的代码如下：

Vue.directive('draggable', {
  bind: function (el, binding) {
    // 获取元素的初始位置
    const initialPosition = {
      x: el.offsetLeft,
      y: el.offsetTop
    };

    // 监听元素的 touchstart 事件
    el.addEventListener('touchstart', (e) => {
      // 阻止默认行为
      e.preventDefault();

      // 记录手指的初始位置
      const touchStartPosition = {
        x: e.touches[0].clientX,
        y: e.touches[0].clientY
      };

      // 监听元素的 touchmove 事件
      el.addEventListener('touchmove', (e) => {
        // 计算手指移动的距离
        const deltaX = e.touches[0].clientX - touchStartPosition.x;
        const deltaY = e.touches[0].clientY - touchStartPosition.y;

        // 更新元素的位置
        el.style.left = `${initialPosition.x + deltaX}px`;
        el.style.top = `${initialPosition.y + deltaY}px`;
      });

      // 监听元素的 touchend 事件
      el.addEventListener('touchend', () => {
        // 移除 touchmove 事件监听器
        el.removeEventListener('touchmove');

        // 模拟苹果触控球的停靠效果
        setTimeout(() => {
          el.style.transition = 'all 0.2s ease-out';
          el.style.left = `${initialPosition.x}px`;
          el.style.top = `${initialPosition.y}px`;
        }, 100);
      });
    });
  }
});