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