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

相关推荐
dy17177 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5