js实现简单的拖拽功能,pc端拖拽和app拖拽有哪些区别?

本文介绍了一种手机应用中实现拖拽功能的简单方法,主要解决当手机字体调至最大时,某些功能入口按钮可能消失的问题。文章强调了使用元素ID获取、调整元素位置以匹配触摸点以及处理单指触摸事件的重要性。

最近做的手机端应用,客户尽然出现那种将手机字体调到最大,然后一个功能的入口按钮就看不到了的情况;然后就出现了拖拽功能…
这里是一个非常简单的实现方法(没有考虑太多因素,只是实现);
在这里插入图片描述
需要注意的是:
1、获取的元素必须以id的方式获取,别的方式可能监听不到事件的变化;甚至hi报错;
2、实现原理是将该元素的离顶高度和离左宽度和手指所放的位置一致;那么,正常情况下,一般点击拖动的时候会点击按钮的中间部分;所以要将手指的位置相对减去按钮宽高的一半才会将按钮放到相对拖动的位置;
3、要取手指只有一个的情况,如果有多个的情况是失效的;so:e.targetTouches[0]

下面是相关的pc端和手机端触击事件:
pc端:
在这里插入图片描述
手机端:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值