篇首语:本文由小编为大家整理,主要介绍了vue+mousedown实现全屏拖动,全屏投掷相关的知识,希望对你有一定的参考价值。
目录
- 1、html
- 2、JavaScript
- 3、css
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><p id="app"> <p class="ctn ctn1"> <p class="sub sub1" v-for="(site, index) in list1"> <p class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)'> {{ site.name }} </p> </p> </p> <p class="ctn ctn2"> <p class="sub sub2" v-for="(site, index) in list2"> <p class="dragCtn"> {{ index }} : {{ site.name }} </p> </p> </p> </p> <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实现全屏拖动,全屏投掷的主要内容,如果未能解决你的问题,请参考以下文章