长按拖拽移动的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>
相关推荐
IT_陈寒18 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript