自定义指令
Vue.directive('drag',//自定义指令
{
bind: function (el, binding) {
let oDiv = el; //当前元素
oDiv.onmousedown = function (e) {
//鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function (e) {
//通过事件委托，计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
// 防止越界
if (l < 0) {
l = 0
}
if (l > document.documentElement.clientWidth - oDiv.getBoundingClientRect().width) {
l = document.documentElement.clientWidth - oDiv.getBoundingClientRect().width
}
if (t < 0) {
t = 0
}
if (t > document.body.clientHeight - oDiv.getBoundingClientRect().height) {
t = document.body.clientHeight - oDiv.getBoundingClientRect().height - 40
}
//移动当前元素
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
image.png
image.png
一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标
二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度
三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标
四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标
五、x、y
和screenX、screenY一样
通过监听鼠标事件
:class="['music_wrapper',isMin?'min-player':'max-player']"
id="music_player"
@mousedown="handlemousedown"
>
<!-- 最大化 -->
<div class="max-music-player" v-if="!isMin">
<VueAplayer
autoplay
ref="vueplayer"
:music="cur_music"
@pause="handleVueAplayerPlayOrPause(false)"
@play="handleVueAplayerPlayOrPause(true)"
@timeupdate="onTimeupdate"
></VueAplayer>
<i class="iconfont icon-diyiyeshouyeshangyishou" @click="changeCurrentIndex(-1)"></i>
<i class="iconfont icon-zuihouyiyemoyexiayishou" @click="changeCurrentIndex(1)"></i>
<i class="iconfont icon-guanbi"></i>
</div>
<!-- 最小化 -->
<div class="min-music-player" v-else>
<i class="iconfont icon-yinle"></i>
</div>
</div>
handlemousedown(e: any) {
// 当前元素
let music_player: any = document.querySelector("#music_player");
// 鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - music_player.offsetLeft;
let disY = e.clientY - music_player.offsetTop;
this.isDrag = true;
let startTime = e.timeStamp;
document.onmousemove = (el: any) => {
if (this.isDrag) {
let moveX = el.clientX - disX;
let moveY = el.clientY - disY;
if (moveX < 0) {
moveX = 0;
}
if (
moveX >
document.documentElement.clientWidth -
music_player.getBoundingClientRect().width
) {
moveX =
document.documentElement.clientWidth -
music_player.getBoundingClientRect().width;
}
if (
moveY >
document.documentElement.clientHeight -
music_player.getBoundingClientRect().height
) {
moveY =
document.documentElement.clientHeight -
music_player.getBoundingClientRect().height;
}
if (moveY < 0) {
moveY = 0;
}
music_player.style.left = moveX + "px";
music_player.style.top = moveY + "px";
}
};
document.onmouseup = (el: any) => {
const that = this;
this.isDrag = false;
let endTime = el.timeStamp;
if (endTime - startTime < 150) {
/**
* 当鼠标点击抬起间隔不超过150时则为点击事件 此时判断当前点击元素包含的className来判断是否执行打开关闭事件
*/
if (this.isMin && el.target.className.includes("icon-yinle")) {
this.getMusicPlayMax(false);
} else if (el.target.className.includes("icon-guanbi")) {
this.getMusicPlayMax(true);
}
}
};
}
这里的重点就是鼠标抬起按下时还会触发点击事件 这里我们做个判断 通过间隔时间来判断是否点击
