js窗口拖动

最新推荐文章于 2022-11-03 11:07:02 发布

原创最新推荐文章于 2022-11-03 11:07:02 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、标签
二、方法
三、css
总结

前言

vue中基本的窗口拖动代码

提示：以下是本篇文章正文内容，下面案例可供参考

一、标签

<div ref="window" class="window" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></div>

二、方法

代码如下（示例）：

// 鼠标按下
    mouseDown(e) {
      this.isDown = true
      const wind = this.$refs.window
      // 获取x坐标和y坐标
      this.clientX = e.clientX
      this.clientY = e.clientY

      // 获取左部和顶部的偏移量
      this.windOffsetLeft = wind.offsetLeft
      this.windOffsetTop = wind.offsetTop
      wind.style.cursor = 'move'
    },

    // 鼠标移动
    mouseMove(e) {
      if (!this.isDown) return
      // 获取x和y
      var nx = e.clientX
      var ny = e.clientY
      // 计算移动后的左偏移量和顶部的偏移量
      var nl = nx - (this.clientX - this.windOffsetLeft)
      var nt = ny - (this.clientY - this.windOffsetTop)
      this.$refs.window.style.left = nl + 'px'
      this.$refs.window.style.top = nt + 'px'
    },

    // 鼠标松开
    mouseUp() {
      this.isDown = false
      this.$refs.window.style.cursor = 'default'
    }

三、css

.window {
        background: linear-gradient(180deg, #5392AC 0%, #2B3E51 100%);
        opacity: 0.8;
        position: fixed;
        width: 30%;
        top: calc(50vh - 200px);
        left: 40%;
        padding: 30px 30px 0 30px;
        color: #fff;
        font-size: 16px;
       }