两种方式,思路都一样 就是写的方式不一样
<template>
<div>
<div class="box" ref="dragBox"></div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const dragBox = ref<HTMLDivElement>()
const getBox = () => {
return dragBox.value as HTMLDivElement
}
//鼠标按下时
const fnDown = (ev: MouseEvent) => {
const disX = ev.clientX - getBox().offsetLeft
const disY = ev.clientY - getBox().offsetTop
//鼠标移动时
document.onmousemove = (ev: MouseEvent) => {
const x = ev.clientX - disX
const y = ev.clientY - disY
getBox().style.left = x + 'px'
getBox().style.top = y + 'px'
}
//鼠标抬起 清除移动和鼠标抬起事件
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
}
}
onMounted(() => {
getBox().onmousedown = fnDown
})
</script>
<style lang="less" scoped>
.box {
width: 150px;
height: 150px;
position: absolute;
background-color: red;
}
</style>
第二种
<template>
<div>
<div class="box" ref="dragBox"></div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
interface iPostions {
disX: number
disY: number
x: number
y: number
}
const dragBox = ref<HTMLDivElement>()
const getBox = () => {
return dragBox.value as HTMLDivElement
}
const positions = reactive<iPostions>({
disX: 0,
disY: 0,
x: 0,
y: 0
})
//鼠标移动的封装
const fnMove = (ev: MouseEvent) => {
positions.x = ev.clientX - positions.disX
positions.y = ev.clientY - positions.disY
getBox().style.left = positions.x + 'px'
getBox().style.top = positions.y + 'px'
}
//鼠标抬起的封装
const fnUp = () => {
document.onmousemove = null
document.onmouseup = null
}
// 鼠标按下时
const fnDown = (ev: MouseEvent) => {
positions.disX = ev.clientX - getBox().offsetLeft
positions.disY = ev.clientY - getBox().offsetTop
document.onmousemove = fnMove
//
document.onmouseup = fnUp
}
onMounted(() => {
getBox().onmousedown = fnDown
})
</script>
<style lang="less" scoped>
.box {
width: 150px;
height: 150px;
position: absolute;
background-color: red;
}
</style>