vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
程序员文章站
2022-03-07 16:57:55
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；
搞了半天在，总算解决了，但是问题的深层原理还没搞...
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；
搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：
只能慢速拖动的代码：
<!doctype html>
<html>
<head>
<title>vue结合原生js实现拖动</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="ctn ctn1">
<div class="sub sub1" v-for="(site, index) in list1">
<div class="dragctn fixed" @mousedown="mousedown(site, $event)" @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)'>
{{ site.name }}
</div>
</div>
</div>
<div class="ctn ctn2">
<div class="sub sub2" v-for="(site, index) in list2">
<div class="dragctn">
{{ index }} : {{ site.name }}
</div>
</div>
</div>
</div>
<script>
new vue({
el: '#app',
data: {
list1: [{name:'拖动我', index:0}],
list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}],
vm:'',
sb_bkx: 0,
sb_bky: 0,
is_moving: false
},
methods: {
mousedown: function (site, event) {
var startx=event.x;
var starty=event.y;
this.sb_bkx=startx - event.target.offsetleft;
this.sb_bky=starty - event.target.offsettop;
this.is_moving = true;
},
mousemove: function (site, event) {
var endx=event.x - this.sb_bkx;
var endy=event.y - this.sb_bky;
var _this = this
if(this.is_moving){
event.target.style.left=endx+'px';
event.target.style.top=endy+'px';
}
},
mouseup: function (e) {
this.is_moving = false;
}
}
})
</script>
<style>
.ctn{
line-height: 50px;
cursor: pointer;
font-size: 20px;
text-align: center;
float: left;
}
.sub:hover{
background: #e6dcdc;
color: white;
width: 100px;
}
.ctn1{
border: 1px solid green;
width: 100px;
}
.ctn2{
border: 1px solid black;
width: 100px;
margin-left: 50px;
}
.fixed{
width: 100px;
height: 100px;
position: fixed;
background: red;
left: 10px;
top: 10px;
cursor: move;
}
</style>
</body>
</html>
可以快速拖动的代码：
<!doctype html>
<html>
<head>
<title>vue结合原生js实现拖动</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="ctn ctn1">
<!-- draggable=true -->
<div class="sub sub1" v-for="(site, index) in list1">
<!-- @mousemove.prevent='mousemove(site, $event)' -->
<div class="dragctn fixed" @mousedown="mousedown(site, $event)" @mouseup='mouseup(site, $event)'>
{{ site.name }}
</div>
</div>
</div>
<div class="ctn ctn2">
<div class="sub sub2" v-for="(site, index) in list2">
<div class="dragctn">
{{ index }} : {{ site.name }}
</div>
</div>
</div>
</div>
<script>
new vue({
el: '#app',
data: {
list1: [{name:'拖动我', index:0}],
list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}],
vm:'',
sb_bkx: 0,
sb_bky: 0,
},
methods: {
mousedown: function (site, event) {
var event=event||window.event;
var _target = event.target
var startx=event.clientx;
var starty=event.clienty;
var sb_bkx=startx-event.target.offsetleft;
var sb_bky=starty-event.target.offsettop;
var ww=document.documentelement.clientwidth;
var wh = window.innerheight;
if (event.preventdefault) {
event.preventdefault();
} else{
event.returnvalue=false;
};
document.onmousemove=function (ev) {
var event=ev||window.event;
var scrolltop=document.documentelement.scrolltop||document.body.scrolltop;
if (event.clienty < 0 || event.clientx < 0 || event.clienty > wh || event.clientx > ww) {
return false;
};
var endx=event.clientx-sb_bkx;
var endy=event.clienty-sb_bky;
_target.style.left=endx+'px';
_target.style.top=endy+'px';
}
},
mouseup: function (e) {
document.onmousemove=null;
}
}
})
</script>
<style>
.ctn{
line-height: 50px;
cursor: pointer;
font-size: 20px;
text-align: center;
float: left;
}
.sub:hover{
background: #e6dcdc;
color: white;
width: 100px;
}
.ctn1{
border: 1px solid green;
width: 100px;
}
.ctn2{
border: 1px solid black;
width: 100px;
margin-left: 50px;
}
.fixed{
width: 100px;
height: 100px;
position: fixed;
background: red;
left: 10px;
top: 15px;
cursor: move;
}
</style>
</body>
</html>
补充:vue 自定义指令-拖拽
主要思想： 获取拖拽的dom元素，在odiv.onmousedown事件内获取鼠标相对dom元素本身的位置：
var disx=ev.clientx-odiv.offsetleft; var disy=ev.clienty-odiv.offsettop;
再通过document.onmousemove事件计算dom元素左上角相对 视口的距离：
var l=ev.clientx-disx; var t=ev.clienty-disy; odiv.style.left=l+'px'; odiv.style.top=t+'px';
完整代码：
<script>
/* vue-自定义指令-拖拽 */
vue.directive('drag',function(){
var odiv=this.el;
odiv.onmousedown=function(ev){
var disx=ev.clientx-odiv.offsetleft;
var disy=ev.clienty-odiv.offsettop;
document.onmousemove=function(ev){
var l=ev.clientx-disx;
var t=ev.clienty-disy;
odiv.style.left=l+'px';
odiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
window.onload=function(){
var vm=new vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div>
</body>
总结
以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能，希望对大家有所帮助
上一篇： 使用Vue实现图片上传的三种方式