手机上会偶尔用到拖动div的效果,虽然我自己还没遇到,先写一个以防万一,需要注明的是,具体实现代码是我在网上找的,但是那个代码存在一些问题,我又搜集了其他资料对其修改,达到了现在的样子,所以还是要感谢写这段代码的大神与万能的搜索引擎
1、分享代码
html代码
<template>
<div class="main">
<div ref="move_div" @touchstart="down" @touchmove="move" @touchend="end" :style="{top: top + 'px', left: left + 'px'}" class="drag_area"></div>
</div>
</template>
极其简单的结构,毕竟只是个DEMO
SCSS代码
.main{
background-color: brown;
height: -webkit-fill-available;
.drag_area{
width: 10vw;
height: 10vw;
background-color: dodgerblue;
position: absolute;
top: 0;
left: 0;
}
}
为了截图显眼,特地给main加了个背景颜色