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

相关推荐
sdgsdgdsgc1 天前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 天前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j1 天前
spark
javascript·数据库·spark
黑云压城After1 天前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务1 天前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友1 天前
什么是断言?
前端·后端·安全
FIN66681 天前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4951 天前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1241 天前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树1 天前
前端图片加载失败、 img 出现裂图的原因全解析
前端