写项目时遇到的一个需求,这里记录一下,简单说一下功能,需要一个img图片,可拖动,可点击跳转,但是mousedown得优先级高于ckick,不多说了下面这直接上代码。
css
<div id="avatar" style="position: absolute;top: 10%;right: 3%;z-index: 999;" @mousedown="smallDown($event)" @click="dbcl($event)">
<img style="width: 90px;" draggable="false" src="../assets/image/客服入口.png" alt="">
</div>
最开始是上图这么写的,但是运行后发现,不行,同时绑定没生效,于是做了下面的调整
css
<div id="avatar" style="position: absolute;top: 10%;right: 3%;z-index: 999;" @mousedown="smallDown($event)">
<div @click="dbcl($event)">
<img style="width: 90px;" draggable="false" src="../assets/image/客服入口.png" alt="">
</div>
</div>
这里两个时间都会生效了,但是新的问题,如何区分开两个事件,百度了很多,最后还是用setTimeout,去做时间差异,如下图
javascript
dbcl(e) {
clearTimeout(this.down);// 清除上一个
},
smallDown(e) {
clearTimeout(this.down);// 清除上一个
this.down = setTimeout(function (event) {
}, 200);// 超过这个时间代表走的是拖动
}
好了,事件的解决了,接下来就该,拖动的了,话不多说直接上代码
ini
smallDown(e) {
clearTimeout(this.down);
this.down = setTimeout(function (event) {
this.mouse = true;
var demo = document.getElementById('avatar');// 获取图片的demo
demo.style.pointerEvents = 'none';//阻止事件穿透
var canMove = false
var x = 0, y = 0
x = e.pageX - demo.offsetLeft // 获取位置
y = e.pageY - demo.offsetTop
canMove = true
var Onmousedown = document.onmousedown;
var Onmousemove = document.onmousemove;
document.onmousemove = function (e) {
e.preventDefault(); //阻止默认行为
if (canMove) {
var left = e.pageX - x
var top = e.pageY - y
if (left < 0) left = 0
if (top < 0) top = 0
var maxLeft = window.innerWidth - demo.offsetWidth
var maxTop = window.innerHeight - demo.offsetHeight
if (left > maxLeft) left = maxLeft
if (top > maxTop) top = maxTop
demo.style.left = left + "px" // 得到图片移动的位置坐标
demo.style.top = top + 'px'
}
document.onmouseup = function (event) {
event.preventDefault(); //阻止默认行为
demo.style.pointerEvents = null;
canMove = false
document.onmousedown = Onmousedown;
document.onmousemove = Onmousemove;
}
}
window.oncontextmenu = function (e) {
e.preventDefault()//阻止默认行为
}
window.onblur = function () {
canMove = false
}
}, 200);
}
好了,到这里,图片拖动,点击就完成了。可能有些还不是很好,也有些粗糙,这里只是作为日常的一个问题记录。有不足之处希望多多指正。