代码编织梦想

好的,下面是如何在 Vue 3 中写一个拖动组件的基本步骤。

  1. 使用 Vue 3 的 Composition API 来创建组件。

  2. 为拖动元素添加 mousedown 事件监听器,并在事件处理函数中记录鼠标的初始位置。

  3. document 上添加 mousemovemouseup 事件监听器,在这些事件处理函数中计算鼠标的位移并更新拖动元素的位置。

  4. 使用 CSS transform 来实现拖动元素的位移。

示例代码如下:

<template>
  <div ref="draggable" @mousedown="handleMouseDown">
    拖动我
  </div>
</template>

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

export default {
  setup() {
    const draggableElement = ref(null);
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    const handleMouseDown = (event) => {
      initialX = event.clientX - xOffset;
      initialY = event.clientY - yOffset;

      if (event.target === draggableElement.value) {
        isDragging = true;
      }
    };

    const handleMouseUp = (event) => {
      initialX = currentX;
      initialY = currentY;

      isDragging = false;
    };

    const handleMouseMove = (event) => {
      if (isDragging) {
        event.preventDefault();
        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY);
      }
    };

    const setTranslate = (xPos, yPos) => {
      draggableElement.value.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
    };

    onMounted(() => {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    });

    return {
      draggableElement,
      handleMouseDown
    };
  }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42588877/article/details/129607674

vue3 拖拽组件-爱代码爱编程

vue3 拖拽组件 我的结构是这样的我要在about页面使用这个组件,实现如下: // 可拖拽组件:pc和Mobile function useMove(el: any) { el.style.position = 'fixed'; let offsetX: number, offsetY: number, oL: number, oT

Vue 实现可拖拽、拖拽组件-爱代码爱编程

描述:         组件仅封装拖拽功能,内容通过#header、#default、#footer插槽 自定义   <template> <div ref="wrapper" class="drag-bar-wrapper" > <div ref="header"

vue3项目使用vuedraggable拖拽组件_某小只的博客-爱代码爱编程

1.安装: npm i -S vuedraggable@next //这样才能安装最新的版本,低版本会踩坑 2.引入(注册使用即可) import draggable from 'vuedraggable' 3.小示例 <draggable v-model="list" class="

vue3 实现图片滚轮缩放拖拽组件_qq_37656005的博客-爱代码爱编程

下面将采用Vue3的语法讲述如何实现在一定区域内用鼠标滚轮缩放图片以及在该区域内拖拽图片,在下面的应用里还会使用到父子组件传值,调用方法,以及compute计算,自定义指令等 效果图: 图片缩放拖拽 由父组件和子组件完成 父组件html <div class="box1"> <imgbox :conf

vue3 组件拖动_夜雨gecer的博客-爱代码爱编程

效果  前文 本文使用的是Vue3 + TS ,请酌情参考。 插件 sortablejs @types/sortablejs 代码  <template> <div class="drag-test-page"> <!-- vue3 TransitionGroup 组件 https://cn.

vue 实现拖拽模块(一)_记得抬头微笑的博客-爱代码爱编程

本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图 实现思路 使用 H5 的新特

手写拖动上传组件(vue3/react)-爱代码爱编程

Vue3版本 <script setup lang="ts"> import { reactive, nextTick } from "vue"; import { useMainStore } from ".

简单使用vue拖拽组件vue3-爱代码爱编程

项目中需要使用到拖拽,这里使用vue3-dnd来满足需求 这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd-html5-backend 然后在app.vue里面添加代码 <template> <DndProvider :bac

vue3 创建一个可拖拽组件_vue3拖拽组件-爱代码爱编程

 工程根目录新建文件夹和文件如下 1.draggable.ts 代码如下 /* 需求:实现一个拖拽指令,可在父元素区域任意拖拽元素。 思路: 1、设置需要拖拽的元素为absolute,其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3、鼠标移动(onmousem