<div :style="dialogHeight" class="pathfind dialog" ref="dialogRef"
v-show="visible.isShow" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)">
// 内容
</div>
<script>
export default {
methods: {
mouseDownHandleelse(event) {
// 判断文本框是否聚焦 文本框聚焦时不能移动窗口
var inputs = document.getElementsByClassName("search-input")
var flag = false
for (let i = 0; i < inputs.length; i++) {
let temp = inputs[i].getElementsByClassName("el-input__inner")
for (let j = 0; j < temp.length; j++) {
if (temp[j] == document.activeElement) flag = true
}
}
if (!flag) {
// 计算当前鼠标在窗口中的位置
this.moveDataelse.x = event.pageX - this.$refs.dialogRef.offsetLeft
this.moveDataelse.y = event.pageY - this.$refs.dialogRef.offsetTop
event.currentTarget.style.cursor = 'move'
window.onmousemove = this.mouseMoveHandleelse
}
},
mouseMoveHandleelse(event) {
// 计算窗口拖动后距离上边有右边的距离(我的需求时靠右,可以计算靠左更简单点)
let moveRight = window.innerWidth - this.$refs.dialogRef.offsetWidth - (event.pageX - this.moveDataelse.x) + 'px'
let moveTop = event.pageY - this.moveDataelse.y + 'px'
this.$refs.dialogRef.style.right = moveRight
this.$refs.dialogRef.style.top = moveTop
},
mouseUpHandleelse(event) {
window.onmousemove = null
event.currentTarget.style.cursor = 'default'
}
}
}
</script>
vue的 vue-draggable-resizable插件实现
各种强大灵活参数和事件参考官网修改:https://github.com/gorkys/vue-draggable-resizable
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true" :min-width="200" :min-height="200">
<p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
</vdr>
<vdr
:w="200"
:h="200"
:parent="true"
:debug="false"
:min-width="200"
:min-height="200"
:isConflictCheck="true"
:snap="true"
:snapTolerance="20"
>
</vdr>
</div>
</template>
<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
components: { vdr },
data: function () {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
methods: {
onResize: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>