目次
必要
フローティングボックスにマウスドラッグ機能を追加
一連の考え
- ドラッグする必要があるボックスにマウスプレスイベントを追加します。
- マウスが押された後の、マウスのクリック位置とボックスの端の間の距離を取得します。
- マウス移動イベントをドキュメントに追加する
- マウスの移動中にボックスの位置を変更します
- ドキュメントのマウス ポップアップをリッスンし、マウス移動イベントを削除します
コード
<!-- 鼠标拖拽盒子 -->
<template>
<div>
<!-- 【1】给需要拖动的盒子添加鼠标按下事件 -->
<div ref="btns" class="btns" @mousedown="mousedownHandler">试试拖动我</div>
</div>
</template>
<script>
export default {
name: 'Drag',
components: {
},
data() {
return {
mouseToBoxRangeX: 0, // 鼠标点击位置与盒子边缘的距离
mouseToBoxRangeY: 0 // 鼠标点击位置与盒子边缘的距离
}
},
computed: {
},
watch: {
},
mounted() {
// 【5】侦听 document 鼠标弹起，移除鼠标移动事件
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', this.mousemoveHandler)
})
},
methods: {
mousedownHandler($event) {
// 【2】鼠标按下后获取鼠标点击位置与盒子边缘的距离
// 鼠标点击位置与盒子边缘的距离 = 鼠标点击位置 - 盒子当前位置
this.mouseToBoxRangeX = $event.pageX - this.$refs.btns.offsetLeft
this.mouseToBoxRangeY = $event.pageY - this.$refs.btns.offsetTop
// 【3】给 document 添加鼠标移动事件
document.addEventListener('mousemove', this.mousemoveHandler)
},
mousemoveHandler($event) {
// 【4】鼠标移动过程中，将盒子的位置进行重新定位
// 盒子当前位置 = 鼠标点击位置 - 鼠标点击位置与盒子边缘的距离 - 盒子自身设定的边距（此处没有）
// 【注意】设置盒子最新位置时需加上单位 'px'
this.$refs.btns.style.left = $event.pageX - this.mouseToBoxRangeX + 'px'
this.$refs.btns.style.top = $event.pageY - this.mouseToBoxRangeY + 'px'
}
}
}
</script>
<style lang='scss' scoped>
.btns {
width: 70px;
height: 147px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 2000;
cursor: move;
background-color: red;
}
</style>
ページ表示
【補足】Pure js実装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: tomato;
margin: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
/*
效果：鼠标拖着盒子移动
拖着：
鼠标左键按着不松手（mousedown），然后鼠标移动（mousemove）
注意：鼠标左键按下，才注册上了鼠标移动事件
*/
var box = document.querySelector('.box')
// 添加鼠标点击事件
box.addEventListener('mousedown', function (e) {
console.log('this----', this)
console.log('this.offsetLeft----', this.offsetLeft)
console.log('this.offsetTop----', this.offsetTop)
// 【1】获取鼠标在盒子里的位置
// 鼠标的坐标 - 盒子的坐标
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
console.log(x, y)
// 注册鼠标移动事件（给整个document添加 事件）
document.addEventListener('mousemove', move)
function move(e) {
// 【2】设置盒子的位置（注意 给盒子添加定位）
// 鼠标的坐标 - 鼠标在盒子里的坐标
// 【2.1】盒子没有外边距
// box.style.left = (e.pageX - x) + 'px';
// box.style.top = (e.pageY - y) + 'px';
// 【2.2】盒子有外边距
box.style.left = e.pageX - x - 100 + 'px'
box.style.top = e.pageY - y - 100 + 'px'
}
// 【3】鼠标弹起，删除移动事件
document.addEventListener('mouseup', function () {
// 删除鼠标移动事件
document.removeEventListener('mousemove', move)
})
})
</script>
</body>
</html>