vue实现拖拽窗口功能

 更新时间:2022年04月08日 13:33:40   作者:橡皮擦不掉的  
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue拖拽窗口简单实现代码,供大家参考,具体内容如下

效果

实现代码

<template>
  <transition>
    <!--    绑定style中top和left-->
    <div class="moveBox" :style="position" v-show="show">
      <div
        class="moveHead"
        @mousedown="mousedown"
        @mousemove="mousemove"
        @mouseup="mouseup"
        @mouseleave="mousemove"
      ></div>
      <!--      关闭按钮-->
      <div class="close" @click="toggleShow">×</div>
      <div class="content">
        <!--插槽-->
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "moveBox",
  data() {
    return {
      show: true,//是否显示
      x: 100,//left:x
      y: 50,//top:y
      leftOffset: 0,//鼠标距离移动窗口左侧偏移量
      topOffset: 0,//鼠标距离移动窗口顶部偏移量
      isMove: false,//是否移动标识
    };
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  methods: {
    //控制打开关闭
    toggleShow() {
      this.x = 100;
      this.y = 50;
      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>

<style lang="less" scoped>
.moveBox {
  width: 500px;
  height: 300px;
  position: fixed;
  box-shadow: 0 0 5px 3px #95a5a6;
  .moveHead {
    height: 30px;
    background-color: #bdc3c7;
    cursor: move;
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 30px;
    font-size: 24px;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
  }
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

使用

<template>
  <div class="home">
    <button @click="$refs.moveBox.toggleShow()">toggle moveBox</button>
    <move-box ref="moveBox">
      Hello World
    </move-box>
  </div>
</template>

代码没什么难度,主要是使用了定位,在鼠标移动事件中定义top和left值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题

    解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题

    这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 详解Vue一个案例引发「内容分发slot」的最全总结

    详解Vue一个案例引发「内容分发slot」的最全总结

    这篇文章主要介绍了详解Vue一个案例引发「内容分发slot」的最全总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue监听键盘事件的相关总结

    vue监听键盘事件的相关总结

    这篇文章主要介绍了vue监听键盘事件的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 详解基于vue的移动web app页面缓存解决方案

    详解基于vue的移动web app页面缓存解决方案

    这篇文章主要介绍了详解基于vue的移动web app页面缓存解决方案,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • jdk1.8+vue elementui实现多级菜单功能

    jdk1.8+vue elementui实现多级菜单功能

    这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • Vue自定义树形控件使用详解

    Vue自定义树形控件使用详解

    这篇文章主要为大家详细介绍了Vue自定义树形控件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vite构建项目并支持微前端

    vite构建项目并支持微前端

    本文主要介绍了vite构建项目并支持微前端,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue使用codemirror的两种用法

    vue使用codemirror的两种用法

    这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin

    如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin

    这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解VUE单页应用骨架屏方案

    详解VUE单页应用骨架屏方案

    这篇文章主要介绍了详解VUE单页应用骨架屏方案,详细的介绍了什么是骨架屏以及是宪法方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论