vue移动端拖拽插件,vue移动端左右滑动
本文主要详细介绍了vue拖动移动div的效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue在移动端实现div拖动的具体代码，供大家参考。具体内容如下
拖div的效果在手机上偶尔会用到。虽然我自己没遇到过，但还是想写一个以防万一。需要说明的是，我在网上找到了具体的实现代码，但是那个代码有一些问题。我收集了其他资料修改了一下，也是现在这个样子，所以还是要感谢写这个代码的大神和万能的搜索引擎。
1、分享代码
Html代码
模板
div class=main
div ref= move _ div @ touch start= down @ touch move= move @ touch end= end :style= { top:top px ，left:left px } class= drag _ area /div
/div
/模板
结构极其简单，毕竟只是一个DEMO
SCSS电码。主要{
背景色：棕色；
高度：-WebKit-fill-可用；拖动区域{
宽度：10vw
高度：10vw
背景色：道奇蓝；
位置：绝对；
top:0；
左：0；
}
}
为了让截图显眼，main上特意加了一个背景色。
翻译
效果是可以在屏幕范围内自由拖动蓝色色块，但我特意做了超出屏幕区域的限制，不需要限制的可以自己改。
javascript，javascript
导出默认值{
名称：拖动，
data () {
返回{
标志：假，
位置：{x: 0，y: 0，左：0，上：0}，
top: 0，
左：0，
width:window . inner width document . document element . client width document . body . client width，
height:window . inner height document . document element . client height document . body . client height
}
},
方法：{
Down () {//拖动开始操作
this.flags=true
const refs=this。$ refs . move _ div . getboundingclientrect()
让触摸=事件
if (event.touches) {
touch=event.touches[0]
}
this.position.x=touch.clientX
this.position.y=touch.clientY
this.position.left=refs.left
this.position.top=refs.top
},
Move () {//拖动中的操作
if (this.flags) {
让触摸=事件
if (event.touches) {
touch=event.touches[0]
}
const xPum=this . position . left touch . clientx-this . position . x
const yPum=this . position . top touch . clienty-this . position . y
this.left=xPum
this.top=yPum
this.banOut()
//防止页面滑动的默认事件
document . addevent listener( touch move ，function () {
事件. preventDefault()
}，{passive: false})
}
},
End () {//拖动完成的操作。
this.flags=false
this.banOut()
},
BanOut () {//避免拖动越界限制。
const refs=this。$ refs . move _ div . getboundingclientrect()
if (this.left 0) {
this.left=0
} else if(this . left this . width-refs . width){
this . left=this . width-refs . width
}
如果(this.top 0) {
this.top=0
} else if(this . top this . height-refs . height){
this . top=this . height-refs . height
}
}
}
}
代码简洁明了。如果你对触控事件有学习需求，可以自己想办法。如果只是想用，复制粘贴改一下就行了。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。