vue 鼠标拖动画矩形_vue实现移动端触屏拖拽功能

vue实现移动端可拖拽浮球，供大家参考，具体内容如下

1 首先创建一个div

@mousedown="down" @touchstart.stop="down"

@mousemove="move" @touchmove.stop="move"

@mouseup="end" @touchend.stop="end" @click="showRewardDesc"

:style="{top:position.y+'px', left:position.x+'px'}">

奖励规则

2 给 div 附上样式

.floatball{

color:white;

height:50px;

width: 50px;

padding: 5px;

z-index: 990;

position: fixed;

top: 60px;

right: 320px;

border-radius: 50%;

background-color: rgba(29, 157, 237,0.8);

}

3 给 div 附上事件

准备四个变量

1)、屏幕长

var screenHeight = window.screen.height

2)、屏幕宽