随意拖动
javaScript使用拖拽Api 开发dom全屏随意拖动
dragstart (e) {
offsetX = e.offsetX
offsetY = e.offsetY
},
drag (e) {
let x = e.pageX
let y = e.pageY
if (x === 0 && y === 0) {
return // 不处理拖动最后一刻X和Y都为0的情形
}
x -= offsetX
y -= offsetY
this.$refs.minimizeBox.style.left = x + 'px'
this.$refs.minimizeBox.style.top = y + 'px'
}
<div draggable='true' @dragstart="dragstart" @drag="drag" class="minimize-box" v-show="minimize" ref="minimizeBox">-</div>
.minimize-box{
width: 50px;
height: 50px;
border-radius: 50%;
background: #0078ff;
color: #FFFFFF;
position: fixed;
top: 20%;
right: 5%;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 10;
}