vue实现拖拽窗口功能

本文实例为大家分享了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值。

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

标签

发表评论