Vue3+TS封装一个可任意拖拽的悬浮球组件，可拓展

最新推荐文章于 2024-10-10 11:24:04 发布

codnan

最新推荐文章于 2024-10-10 11:24:04 发布

阅读量4.6k

点赞数 3

分类专栏： JavaScript Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/annans/article/details/127427847

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue.js

6 篇文章 0 订阅

订阅专栏

本文档介绍了一个使用Vue3创建的可拖动悬浮球组件的实现方法。通过监听dragstart和dragend事件，结合CSS定位，实现了在屏幕上任意拖动的效果。代码简洁，适用于简单的页面悬浮功能，可以进一步扩展以满足更多需求。

摘要由CSDN通过智能技术生成

先上效果图！图中悬浮球可在屏幕中任意拖动！

最近项目中遇到一个需求，能够在所有页面中往悬浮球中添加或者移出某一项，类似于网页端淘宝的购物车这种的。但是功能也不是很复杂，所以想用最简单的方式以最少的代码实现！

公司技术是vue3，所以我就用vue3组件形式来实现，使用vue2的也可以进行改造的！

上代码！！

父组件中：HomeView.vue

<template>
  <div class="home-view">
    <h2>首页</h2>
    <DragBall />
  </div>
</template>

<script lang="ts" setup>
//拖拽组件
import DragBall from "../components/DragBall.vue";
</script>
<style scoped lang="scss">
.home-view {
  background-color: #fff;
  h2 {
    text-align: center;
  }
}
</style>

拖拽组件：DragBall.vue

<template>
  <div
    class="drag-ball"
    draggable="true"
    @dragstart="dragstart($event)"
    @dragend="dragend($event)"
    :style="`right:${elRight}px;bottom:${elBottom}px`"
  >
    <span>悬浮球</span>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const startclientX = ref(0); //记录开始的横坐标位置
const startclientY = ref(0); //记录开始的纵坐标位置
const elRight = ref(50); //定位-初始位置
const elBottom = ref(70); //定位-初始位置
// 拖拽开始事件
const dragstart = (e: any) => {
  // 记录拖拽元素初始位置
  startclientX.value = e.clientX;
  startclientY.value = e.clientY;
};
// 拖拽完成事件
const dragend = (e: any) => {
  console.log("eeeeee", e);
  let x = startclientX.value - e.clientX; // 计算偏移量
  let y = startclientY.value - e.clientY;
  elRight.value += x; // 实现拖拽元素随偏移量移动
  elBottom.value += y;
};
</script>
<style scoped lang="scss">
.drag-ball {
  cursor: pointer;
  position: absolute;
  width: 150px;
  height: 50px;
  background: #242b3a;
  box-shadow: 0px 6px 16px -8px rgb(0 0 0 / 8%),
    0px 9px 28px 0px rgb(0 0 0 / 5%), 0px 12px 48px 16px rgb(0 0 0 / 3%);
  border-radius: 23px;
  text-align: center;
  color: #fff;
  line-height: 50px;
}
</style>

这样就轻松实现一个可任意拖拽的组件，可对其进行拓展！

实现逻辑：通过定位实现，记录拖拽开始时悬浮球所在的位置，以及拖拽结束时所在的位置，计算出偏移量然后与当前定位所处的的right和bottom或者left和top进行计算，得到最终的元素的定位！

还有一种方式是mousedown、mousemove、mouseup鼠标移动的方式，这种方式相对复杂一点，dragstart和dragend是H5的方式比较容易。