vue可拖拽移动放大缩小的弹框组件

已于 2023-03-30 09:58:07 修改
阅读量2.9k 收藏 10
点赞数 1
文章标签： html css3 vue.js javascript 前端
于 2023-03-30 09:19:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panfu163/article/details/129850376
版权 
完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend
下面是HTML5的拖拽事件
dragstart：开始拖元素触发，作用于拖拽元素
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素
dragover：当元素拖动到drop元素上时触发，作用于目标元素
drop：当元素放下到drop元素触发，作用于目标元素
dragleave ：当元素离开drop元素时触发，作用于目标元素
drag：每次元素被拖动时会触发，作用于目标元素
dragend：放开拖动元素时触发，作用于目标元素

 js中获取鼠标滚动量/滚动了多少可以用onwheel事件来实现放大缩小。

html代码如下

<template>
    <div class="back_box" @click.stop="hide"
         v-if="isVisible" ref="back_box"
         :style="{background: isMaskVisible? 'rgba(0,0,0,0.5)' : 'none'}">
      <div
        class="drag_box"
        draggable="true"
        @dragstart="dragstart"
        @dragover="dragover"
        @dragend="dragend"
        @wheel="handleWeel"
        :style="`left:${elLeft}px;top:${elTop}px;width:${elWidth}px;height:${elHeight}px;`"
        @click.stop="show"
      >
        <div class="sotp" @click.stop="hide"><a-icon type="close" style="font-size: 20px;"/></div>
        <div
          class="content"
          :style="`left:${(0 * elWidth) / xWidth}px;top:${(0 * elHeight) / yHeight}px;width:${xWidth}px;height:${yHeight-50}px;-webkit-transform: scale(${meter_zoom} )`"
        >
          <div class="title" v-if="title">{{title}}</div>
          <slot name="content"></slot>
        </div>
      </div>
    </div>
</template>

  css代码主要用到positon:fixed让无素在窗口最上面

<style scoped lang="scss">
  .back_box {
    position: fixed;
    z-index: 9999;
    cursor: move;
  }

  .drag_box {
    position: fixed;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
    -webkit-user-drag: none;
  }

  .content {
    position: absolute;
    z-index: 88;
    width: 100%;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    transform-origin: 0 0; /* 用作缩放基点 */
    .title {
      height: 40px;
      padding: 10px;
      font-weight: 600;
      font-size: 14px;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .sotp {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 999;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

 1.父元素的宽-自适应值 ini父元素的高-自适应值

2.元素拖拽前距离浏览器的X轴位置

3.元素拖拽前距离浏览器的Y轴位置

4.获取计算偏移量

5.获取元素的左偏移量

6.获取元素的右偏移量

7.设置缩放比例

8.元素宽 元素高

9.子元素缩放比例

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
      xWidth: {
        type: Number,
        default: 400
      },
      yHeight: {
        type: Number,
        default: 400
      },
      xLeft: { // 左侧偏移
        type: Number,
        default: 20
      },
      yTop: { // top偏移
        type: Number,
        default: 20
      },
      title: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      },
      maskVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        initWidth: 0, // 父元素的宽-自适应值
        initHeight: 0, // 父元素的高-自适应值
        startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
        startclientY: 0, // 元素拖拽前距离浏览器的Y轴位置
        endlientX: 0, // 计算偏移量
        endlientY: 0,
        elLeft: 0, // 元素的左偏移量
        elTop: 0, // 元素的右偏移量
        zoom: 1, // 缩放比例
        elWidth: 0, // 元素宽
        elHeight: 0, // 元素高
        meter_zoom: 0, // 子元素缩放比例

        isVisible: false,
        isMaskVisible: false
      }
    },
    watch: {
      visible: {
        deep: true,
        handler (val) {
          if (val) {
            setTimeout(() => {
              this.initBodySize() // 页面初始化
            }, 50)
          }
          this.isVisible = val
        }
      },
      maskVisible: {
        deep: true,
        handler (val) {
          this.isMaskVisible = val
        }
      }
    },
    methods: {
      // 页面初始化
      initBodySize () {
        // this.initWidth = this.$refs.back_box.clientWidth // 拿到父元素宽
        // this.initHeight = this.initWidth * (1080 / 1920);
        this.initWidth = window.innerWidth
        this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)) // 根据宽计算高实现自适应
        this.elWidth = this.initWidth * (this.xWidth / (1920 / 2))
        this.elHeight = this.initHeight * (this.yHeight / (1080 / 2))
        this.meter_zoom = this.elWidth / this.xWidth // 计算子元素缩放比例
        this.elLeft = this.elLeft
        this.elTop = this.elTop
      },
      // 拖拽开始事件
      dragstart (e) {
        this.startclientX = e.layerX // 记录拖拽元素初始位置
        this.startclientY = e.layerY
      },
      dragover (e) {
        let x = e.layerX - this.startclientX // 计算偏移量
        let y = e.layerY - this.startclientY
        this.elLeft += x // 实现拖拽元素随偏移量移动
        this.elTop += y
      },
      // 拖拽完成事件
      dragend (e) {
        let x = e.layerX - this.startclientX // 计算偏移量
        let y = e.layerY - this.startclientY
        this.elLeft += x // 实现拖拽元素随偏移量移动
        this.elTop += y
      },
      // 滚轮放大缩小事件
      handleWeel (e) {
        if (e.wheelDelta < 0) {
          this.zoom -= 0.05
        } else {
          this.zoom += 0.05
        }
        if (this.zoom >= 3) {
          this.zoom = 3
          return
        }
        if (this.zoom <= 0.5) {
          this.zoom = 0.5
          return
        }
        this.elWidth = this.initWidth * (this.xWidth / (1920 / 2)) * this.zoom
        this.elHeight = this.initHeight * (this.yHeight / (1080 / 2)) * this.zoom
        this.meter_zoom = this.elWidth / this.xWidth
      },
      show () { // 显示
        this.isVisible = true
        this.initBodySize()
      },
      hide () { // 隐藏
        this.isVisible = false
        this.$emit('close')
      }
    },
    mounted () {
      // 监听键盘Esc按键事件
      this.$nextTick(() => {
        // 按下键盘
        document.addEventListener('keydown', (e) => {
          // Esc按键是27
          if (e.keyCode === 27) {
            // 在这里写你的操作逻辑
            this.hide()
          }
        })

        // 去除默认的预览图
        // 虽然setDragImage比较鸡肋，但是我们可以设置一张透明的图片就可以实现去除默认的预览图的效果了
        document.addEventListener('dragstart', function (ev) {
          let img = new Image()
          img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
          ev.dataTransfer.setDragImage(img, 0, 0)
        })
      })
    }

  }
</script>

监听键盘Esc按键事件关闭弹框

  // 监听键盘Esc按键事件
      this.$nextTick(() => {
        // 按下键盘
        document.addEventListener('keydown', (e) => {
          // Esc按键是27
          if (e.keyCode === 27) {
            // 在这里写你的操作逻辑
            this.hide()
          }
        })

 需注意：去除默认的预览图

虽然setDragImage比较鸡肋，但是我们可以设置一张透明的图片就可以实现去除默认的预览图的效果了
      document.addEventListener('dragstart', function (ev) {
          let img = new Image()
          img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
          ev.dataTransfer.setDragImage(img, 0, 0)
        })
      })

全部源代码

<template>
    <div class="back_box" @click.stop="hide"
         v-if="isVisible" ref="back_box"
         :style="{background: isMaskVisible? 'rgba(0,0,0,0.5)' : 'none'}">
      <div
        class="drag_box"
        draggable="true"
        @dragstart="dragstart"
        @dragover="dragover"
        @dragend="dragend"
        @wheel="handleWeel"
        :style="`left:${elLeft}px;top:${elTop}px;width:${elWidth}px;height:${elHeight}px;`"
        @click.stop="show"
      >
        <div class="sotp" @click.stop="hide"><a-icon type="close" style="font-size: 20px;"/></div>
        <div
          class="content"
          :style="`left:${(0 * elWidth) / xWidth}px;top:${(0 * elHeight) / yHeight}px;width:${xWidth}px;height:${yHeight-50}px;-webkit-transform: scale(${meter_zoom} )`"
        >
          <div class="title" v-if="title">{{title}}</div>
          <slot name="content"></slot>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
      xWidth: {
        type: Number,
        default: 400
      },
      yHeight: {
        type: Number,
        default: 400
      },
      xLeft: { // 左侧偏移
        type: Number,
        default: 20
      },
      yTop: { // top偏移
        type: Number,
        default: 20
      },
      title: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      },
      maskVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        initWidth: 0, // 父元素的宽-自适应值
        initHeight: 0, // 父元素的高-自适应值
        startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
        startclientY: 0, // 元素拖拽前距离浏览器的Y轴位置
        endlientX: 0, // 计算偏移量
        endlientY: 0,
        elLeft: 0, // 元素的左偏移量
        elTop: 0, // 元素的右偏移量
        zoom: 1, // 缩放比例
        elWidth: 0, // 元素宽
        elHeight: 0, // 元素高
        meter_zoom: 0, // 子元素缩放比例

        isVisible: false,
        isMaskVisible: false
      }
    },
    watch: {
      visible: {
        deep: true,
        handler (val) {
          if (val) {
            setTimeout(() => {
              this.initBodySize() // 页面初始化
            }, 50)
          }
          this.isVisible = val
        }
      },
      maskVisible: {
        deep: true,
        handler (val) {
          this.isMaskVisible = val
        }
      }
    },
    methods: {
      // 页面初始化
      initBodySize () {
        // this.initWidth = this.$refs.back_box.clientWidth // 拿到父元素宽
        // this.initHeight = this.initWidth * (1080 / 1920);
        this.initWidth = window.innerWidth
        this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)) // 根据宽计算高实现自适应
        this.elWidth = this.initWidth * (this.xWidth / (1920 / 2))
        this.elHeight = this.initHeight * (this.yHeight / (1080 / 2))
        this.meter_zoom = this.elWidth / this.xWidth // 计算子元素缩放比例
        this.elLeft = this.elLeft
        this.elTop = this.elTop
      },
      // 拖拽开始事件
      dragstart (e) {
        this.startclientX = e.layerX // 记录拖拽元素初始位置
        this.startclientY = e.layerY
      },
      dragover (e) {
        let x = e.layerX - this.startclientX // 计算偏移量
        let y = e.layerY - this.startclientY
        this.elLeft += x // 实现拖拽元素随偏移量移动
        this.elTop += y
      },
      // 拖拽完成事件
      dragend (e) {
        let x = e.layerX - this.startclientX // 计算偏移量
        let y = e.layerY - this.startclientY
        this.elLeft += x // 实现拖拽元素随偏移量移动
        this.elTop += y
      },
      // 滚轮放大缩小事件
      handleWeel (e) {
        if (e.wheelDelta < 0) {
          this.zoom -= 0.05
        } else {
          this.zoom += 0.05
        }
        if (this.zoom >= 3) {
          this.zoom = 3
          return
        }
        if (this.zoom <= 0.5) {
          this.zoom = 0.5
          return
        }
        this.elWidth = this.initWidth * (this.xWidth / (1920 / 2)) * this.zoom
        this.elHeight = this.initHeight * (this.yHeight / (1080 / 2)) * this.zoom
        this.meter_zoom = this.elWidth / this.xWidth
      },
      show () { // 显示
        this.isVisible = true
        this.initBodySize()
      },
      hide () { // 隐藏
        this.isVisible = false
        this.$emit('close')
      }
    },
    mounted () {
      // 监听键盘Esc按键事件
      this.$nextTick(() => {
        // 按下键盘
        document.addEventListener('keydown', (e) => {
          // Esc按键是27
          if (e.keyCode === 27) {
            // 在这里写你的操作逻辑
            this.hide()
          }
        })

        // 去除默认的预览图
        // 虽然setDragImage比较鸡肋，但是我们可以设置一张透明的图片就可以实现去除默认的预览图的效果了
        document.addEventListener('dragstart', function (ev) {
          let img = new Image()
          img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
          ev.dataTransfer.setDragImage(img, 0, 0)
        })
      })
    }

  }
</script>

<style scoped lang="scss">
  .back_box {
    position: fixed;
    z-index: 9999;
    cursor: move;
  }

  .drag_box {
    position: fixed;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
    -webkit-user-drag: none;
  }

  .content {
    position: absolute;
    z-index: 88;
    width: 100%;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    transform-origin: 0 0; /* 用作缩放基点 */
    .title {
      height: 40px;
      padding: 10px;
      font-weight: 600;
      font-size: 14px;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .sotp {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 999;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

dogface07
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可拖动的悬浮窗+对话框悬浮窗
09-26
可拖动的悬浮窗+对话框悬浮窗，相关博文：http://www.cnblogs.com/tianzhijiexian/p/3994546.html
vue draggable resizable 实现可拖拽缩放的组件功能
10-16
主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗
最新发布
2301_78850344的博客
04-13 862
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
vue实现图片放大缩小及拖拽
weixin_56341412的博客
07-03 4277
vue实现图片放大缩小及拖拽
vue拖拽可拖拽窗口
StupidlyGrass的博客
01-10 674
【代码】vue拖拽可拖拽窗口。
VUE实现可随意拖动的弹窗组件
10-17
今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
手把手教你学会用vue实现元素拖拽移动+滚轮缩放功能
热门推荐
vvv3171071的博客
01-26 2万+
项目中做看板重构时遇到的开发需求，不能使用组件，乍一看感觉很头大，但实际上手做出来后还是小有成就的。 直接进入正题： 先创建一个简单的vue demo项目 <template> <div class="drag"> <div class="back_box"> 这是一个背景 <div class="drag_box">这是一个蓝色可拖拽元素</div> </div> </div&g
Vue3前端模仿实现Windows窗口
咚の窝
04-22 6862
基于vue-cli脚手架使用Vue3+TS技术，在前端实现类似windows的窗口，可以对窗体容器拖拽，窗口大小调整等，封装成两个指令与一个组件，可以选择性调用，扩展性强。
Vue中使用vue-draggable-resizable实现可拖动悬浮组件
weixin_41639609的博客
12-06 1208
vue-draggable-resizable转载https://blog.csdn.net/weixin_44212165/article/details/125255260
vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结
m0_71349739的博客
08-21 1591
npm install --save vue-draggable-resizable 没有依赖 使用可拖动，可调整大小或两者兼备 定义用于调整大小的句柄 限制大小和移动到父元素或自定义选择器 将元素捕捉到自定义网格 将拖动限制为垂直或水平轴 保持纵横比 启用触控功能 使用自己的样式 为句柄提供自己的样式
基于vue图片拖拽放大缩小查看npm包
08-08
基于vue 图片拖拽放大缩小查看npm包
vue 弹框实现移动效果
04-25
vue弹框实现移动效果，可拖动悬浮
【JavaScript源代码】vue实现放大缩小拖拽功能.docx
12-29
vue实现放大缩小拖拽功能 　　本文实例为大家分享了vue实现放大缩小拖拽功能的具体代码，供大家参考，具体内容如下　　点击放大至全屏 再次点击缩小至原始  这个弹框是基于element dialog的基础上写的　　1.再utils文件夹下面新建一个directives.js  (封装好了 直接拿去用）　　import Vue from 'vue';　　import bigPic from '../assets/images/bigChange.png';　　// v-dialogDrag: 弹窗拖拽属性　　Vue.directive('dialogDrag', {　　  bind(el, bi
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
vue模态窗口拖动
qq_43059898的博客
08-06 329
文件名称 directives.js import Vue from 'vue' /* * 使用方法 * 将以下代码复制到一个directives.js文件中，然后在入口文件main.js中导入：import ‘./utils/directives.js’； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩层关闭弹出层 * 如果是for
可拖拽的窗口（Vue）
Mozifei73的博客
05-12 909
我这里使用插槽的方式写的，插槽处放的就是窗口里面的主题内容 话不多说，上代码 <template> <transition class="move_root"> <!-- 绑定style中top和left--> <div class="moveBox" :style="position" v-show="show"> <div class="moveHead" @mousedown="mousedown" @mousemove
vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件
pixle的博客
06-18 4580
本文将手把手教你封装一个可移动的悬浮框组件，利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端（H5、小程序、APP）通用的悬浮组件。
Vue：可拖拽组件
席木木的博客
02-18 3844
Vue：可拖拽组件，分两步走，从原生JS到Vue组件化开发，从零到一构建可拖拽的弹框组件，已贴完整源码，细节部分可根据个人需求进行调整、优化处理。
vue页面种如何打开弹框组件
05-13
在 Vue 页面中打开弹框组件有多种方法，以下是其中一种常见的方式： 1. 在 Vue 组件中定义弹框组件，例如： ```html <template> <div> <button @click="openModal">打开弹框</button> <my-modal v-if="showModal" @close="closeModal"></my-modal> </div> </template> <script> import MyModal from './MyModal.vue'; export default { components: { MyModal, }, data() { return { showModal: false, }; }, methods: { openModal() { this.showModal = true; }, closeModal() { this.showModal = false; }, }, }; </script> ``` 2. 在弹框组件中定义关闭按钮，例如： ```html <template> <div> <div class="modal-overlay" @click="$emit('close')"></div> <div class="modal"> <h2>弹框标题</h2> <p>弹框内容</p> <button @click="$emit('close')">关闭弹框</button> </div> </div> </template> <script> export default { name: 'MyModal', }; </script> ``` 3. 当用户点击打开弹框的按钮时，调用 `openModal` 方法，将 `showModal` 设为 `true`，弹框组件就会显示出来；当用户点击弹框中的关闭按钮时，调用 `closeModal` 方法，将 `showModal` 设为 `false`，弹框组件就会关闭。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dogface07

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值