vue+mousedown实现全屏拖动，全屏投掷
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+mousedown实现全屏拖动，全屏投掷相关的知识，希望对你有一定的参考价值。
1、html
<!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>鼠标滑动</title>
<link rel="stylesheet" href="./index.css">
</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 src="/node_modules/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
2、javascript
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;
}
}
});
3、css
.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;
}
以上是关于vue+mousedown实现全屏拖动，全屏投掷的主要内容，如果未能解决你的问题，请参考以下文章
C#在winform上画一张大于全屏的图片(至少3000*3000像素)。在窗口最大化下用鼠标拖动图片，必须画面流畅。
C#在winform上画一张大于全屏的图片(至少3000*3000像素)。在窗口最大化下用鼠标拖动图片，必须画面流畅。