Today I used the mousemove event of vue + native js and wrote a drag. I found that I could only drag slowly. As long as the mouse moves faster, it will fail and cannot be dragged;
After working on it for a long time, it finally solved it, but the deep principles of the problem have not been understood yet. Those who know can leave a message to share. The following code is directly listed:
Codes that can only be dragged slowly:
<!DOCTYPE html>
<html>
<head>
<title>vueCombined with nativejsImplement dragging</title>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div class="ctn ctn1">
<div class="sub sub1" v-for="(site, index) in list1">
<div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @='mousemove(site, $event)' @mouseup='mouseup(site, $event)'>
{{ }}
</div>
</div>
</div>
<div class="ctn ctn2">
<div class="sub sub2" v-for="(site, index) in list2">
<div class="dragCtn">
{{ index }} : {{ }}
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
list1: [{name:'Drag me', 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=;
var starty=;
this.sb_bkx=startx - ;
this.sb_bky=starty - ;
this.is_moving = true;
},
mousemove: function (site, event) {
var endx= - this.sb_bkx;
var endy= - this.sb_bky;
var _this = this
if(this.is_moving){
=endx+'px';
=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>
Code that can be dragged quickly:
<!DOCTYPE html>
<html>
<head>
<title>vueCombined with nativejsImplement dragging</title>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div class="ctn ctn1">
<!-- draggable=true -->
<div class="sub sub1" v-for="(site, index) in list1">
<!-- @='mousemove(site, $event)' -->
<div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mouseup='mouseup(site, $event)'>
{{ }}
</div>
</div>
</div>
<div class="ctn ctn2">
<div class="sub sub2" v-for="(site, index) in list2">
<div class="dragCtn">
{{ index }} : {{ }}
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
list1: [{name:'Drag me', 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||;
var _target =
var startx=;
var starty=;
var sb_bkx=;
var sb_bky=;
var ww=;
var wh = ;
if () {
();
} else{
=false;
};
=function (ev) {
var event=ev||;
var scrolltop=||;
if ( < 0 || < 0 || > wh || > ww) {
return false;
};
var endx=-sb_bkx;
var endy=-sb_bky;
_target.=endx+'px';
_target.=endy+'px';
}
},
mouseup: function (e) {
=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>
Supplement: vue custom command-drag and drop
Main idea: Get the dragged dom element and get the position of the mouse relative to the dom element itself within the event:
var disX=; var disY=;
Then calculate the distance between the upper left corner of the dom element and the viewport from the upper left corner:
var l=-disX; var t=-disY; =l+'px'; =t+'px';
Complete code:
<script>
/* vue-custom command-drag and drop */
('drag',function(){
var oDiv=;
=function(ev){
var disX=;
var disY=;
=function(ev){
var l=-disX;
var t=-disY;
=l+'px';
=t+'px';
};
=function(){
=null;
=null;
};
};
});
=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<div >
<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>
Summarize
The above is the mouse drag function that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!