长按拖拽移动的vue3组件

复制代码
<template>
  <div
    ref="draggableElement"
    class="draggable-element"
    :style="elementStyle"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <slot></slot>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'PressAndDrag',
  setup() {
    const draggableElement = ref(null);
    const isDragging = ref(false);
    const startPos = ref({ x: 0, y: 0 });
    const currentPos = ref({ x: 0, y: 0 });
    const pressTimer = ref(null);
    const elementStyle = ref({
      position: 'fixed',
      left: '100px',
      top: '100px',
      cursor: 'pointer',
      userSelect: 'none',
      touchAction: 'none'
    });

    // 长按开始
    const startPress = (event) => {
      // 阻止默认行为,防止触摸设备上的滚动等
      event.preventDefault();
      
      // 设置定时器,500ms后开始拖动
      pressTimer.value = setTimeout(() => {
        isDragging.value = true;
        
        // 获取初始位置
        const clientX = event.clientX || event.touches[0].clientX;
        const clientY = event.clientY || event.touches[0].clientY;
        
        startPos.value = {
          x: clientX - currentPos.value.x,
          y: clientY - currentPos.value.y
        };
      }, 500); // 500ms长按时间
    };

    // 开始拖动(鼠标/触摸按下)
    const startDrag = (event) => {
      startPress(event);
      
      // 添加移动和结束事件的监听
      window.addEventListener('mousemove', handleMove);
      window.addEventListener('touchmove', handleMove, { passive: false });
      window.addEventListener('mouseup', endDrag);
      window.addEventListener('touchend', endDrag);
    };

    // 处理移动
    const handleMove = (event) => {
      if (!isDragging.value) return;
      event.preventDefault();
      
      const clientX = event.clientX || event.touches[0].clientX;
      const clientY = event.clientY || event.touches[0].clientY;
      
      currentPos.value = {
        x: clientX - startPos.value.x,
        y: clientY - startPos.value.y
      };
      
      updatePosition();
    };

    // 更新元素位置
    const updatePosition = () => {
      elementStyle.value.left = `${currentPos.value.x}px`;
      elementStyle.value.top = `${currentPos.value.y}px`;
    };

    // 结束拖动
    const endDrag = () => {
      // 清除长按定时器
      if (pressTimer.value) {
        clearTimeout(pressTimer.value);
        pressTimer.value = null;
      }
      
      isDragging.value = false;
      
      // 移除事件监听
      window.removeEventListener('mousemove', handleMove);
      window.removeEventListener('touchmove', handleMove);
      window.removeEventListener('mouseup', endDrag);
      window.removeEventListener('touchend', endDrag);
    };

    // 组件卸载时清理
    onUnmounted(() => {
      endDrag();
    });

    return {
      draggableElement,
      elementStyle,
      startDrag,
      handleMove,
      endDrag
    };
  }
};
</script>

<style scoped>
.draggable-element {
  background-color: #42b983;
  padding: 20px;
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
</style>

使用示例

复制代码
<template>
  <div class="container">
    <PressAndDrag>
      长按并拖动我
    </PressAndDrag>
  </div>
</template>

<script>
import PressAndDrag from './PressAndDrag.vue';

export default {
  components: {
    PressAndDrag
  }
};
</script>

<style>
.container {
  height: 100vh;
  position: relative;
}
</style>
相关推荐
come1123413 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志35 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js