vue项目中图标可拖拽功能实现

最新推荐文章于 2025-06-03 11:15:18 发布

原创

最新推荐文章于 2025-06-03 11:15:18 发布 · 4.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html

本文介绍如何在Vue项目中实现图标拖拽功能。通过监听鼠标事件，获取鼠标坐标并转换为图标的位置，限制拖拽范围。核心知识点包括：获取页面宽高、元素位置属性。代码中使用et.preventDefault()防止默认事件影响操作。该功能适用于提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中页面实现图标拖拽功能

最近在做项目需求时有个小功能：在页面的首页增加一个快速功能按钮，用来满足操作者快速实现某一目的渴望。为了体现代码搬运工的气质与水准，当时心想，这么简单的一个小东西必须给它整的明明白白。于是在页面的左上角完美的位置fixed了一个完美的图标，并配上骚气的颜色。就在一切功能都测试完毕，静待发版部署生产环境的时候，产品告诉我，这个按钮要在所有页面都有，而不单单只在首页！（所有页面就所有页面，只要把这个图标挪到组件的公共页里，不就可以简单的实现了嘛）于是一顿简单暴力的操作在我脑海里一一闪现。可是在图标全都放好才发现，每个页面的内容不同，样式也不一样，之前位置固定的图标就可能会覆盖在某些页面的按钮或图表上，这样即影响其他功能也不美观。于是图标支持拖拽迫在眉睫！（说了那么多废话，都是拖拽的炮灰 >_< ～）

实现思路：

按住鼠标左键进行拖动时获取鼠标对应位置的坐标；
通过鼠标坐标的变化，将坐标值换成图标距离窗口上(top)、左(left)的位置。

知识点：

获取最大拖拽宽高:
window.innerHeight/innerWidth 页面的窗口的高/宽(包含工具条和滚动条)；
document.documentElement.clientHeight/clientWidth (html元素的高/宽)；
document.body.clientHeight/clientWidth (html中body的高/宽)；

图标及鼠标位置:
dom.offsetTop/offsetLeft (dom为获取的图标dom元素，offsetTop/offsetLeft为图标定位属性的top/left值----- 此值决定图标在页面上的实际位置)；
dom.offsetHeight/offsetWidth 可以理解为dom元素的实际高/宽；

代码实现：

创建需要拖拽的元素并绑定鼠标事件

<template>
  <div>
    <span>{
   {
   msg}}</span>
    <div class="homeDiv" id="drag">
      <div class="iconClass" @dblclick="clickFunc" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup">
        <span class="spanClass">{
   {
   iconMsg}}</span>
      </div>
    </div>
  </div>
</template>

拖拽时触发鼠标事件拿到并处理数据

export default{
   
    data(){
   
      retu

最低0.47元/天解锁文章