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博客

相关推荐
挽淚2 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte7 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常9 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱15 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28120 分钟前
Chrome插件开发
前端
前端 贾公子33 分钟前
Monorepo + vite 怎么热更新
前端
coding随想42 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript