vue3实现元素拖拽移动功能

效果图

实现拖拽移动

首先我们给需要实现功能的元素加一个draggable="true"让元素能够被拖拽

先来认识两个搭配draggable属性一起使用的事件------ondragstartondragend,它们的定义分别为:

①. ondragstart 事件在用户开始拖动元素或选择的文本时触发

②. ondragend 事件在用户完成元素或首选文本的拖动时触发。

代码:

复制代码
<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue'
    let initWidth = ref(0) // 父元素的宽-自适应值
    let initHeight = ref(0) // 父元素的高-自适应值
    let startclientX = ref(0) // 元素拖拽前距离浏览器的X轴位置
    let startclientY = ref(0) //元素拖拽前距离浏览器的Y轴位置
    let elLeft = ref(0) // 元素的左偏移量
    let elTop = ref(0) // 元素的右偏移量
    let back_box = ref()
    // 页面初始化
    function initBodySize() {
        initWidth.value = back_box.value.clientWidth; // 拿到父元素宽
        initHeight.value = initWidth.value * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
    }
      // 拖拽开始事件
      function dragstart(e) {
        console.log(e);
        startclientX.value = e.clientX; // 记录拖拽元素初始位置
        startclientY.value = e.clientY;
      }
      // 拖拽完成事件
      function dragend(e) {
        console.log(e);
        let x = e.clientX - startclientX.value; // 计算偏移量
        let y = e.clientY - startclientY.value;
        elLeft.value += x; // 实现拖拽元素随偏移量移动
        elTop.value += y;
      }
      onMounted(()=>{
        initBodySize()
      })
</script>
<template>
    <div id="drag">
      <div class="back_box" ref="back_box">
        这是一个背景
        <div
          class="drag_box"
          draggable="true"
          @dragstart="dragstart($event)"
          @dragend="dragend($event)"
          :style="`left:${elLeft}px;top:${elTop}px`"
        >
          这是一个蓝色可拖拽元素
        </div>
      </div>
    </div>
  </template>
   <style scoped>
   .back_box {
     background: #ccc;
     width: 50vw;
     height: 50vh;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -30%);
   }
   
   .drag_box {
     width: 100px;
     height: 100px;
     background: skyblue;
     position: absolute;
     z-index: 10;
     user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
   }
   </style>

更详细的可以参考:

手把手教你学会用vue实现元素拖拽移动+滚轮缩放功能_vue 拖拽_LangForOne的博客-CSDN博客

相关推荐
轻语呢喃8 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军9 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子12 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游12 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee10113 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子13 分钟前
智能前端实践之 shot-word demo
前端
归于尽14 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810114 分钟前
vite 插件
前端
无数山16 分钟前
autorelease pool
前端
支撑前端荣耀16 分钟前
四、Cypress测试框架拆解
前端