CSS3属性变换实现拖拽

图片源自网络

思路

1、HTML5之触摸屏特有Touch事件。
2、CSS3之平移变换。
3、获取并记录第一次开始拖拽的位置。

代码片段

const CCO__INIT_FLOAT_BUTTON = el => {
  if(!el) return
  var isTouched = false
  var lastY;
  el.addEventListener('touchstart', function(e){
    e.stopPropagation()
    if(isTouched) isTouched = false
    var touch = e.touches && e.touches[0]
    if(!touch) return
    isTouched = true
    if(!lastY) lastY = touch.clientY || touch.screenY
  })
  el.addEventListener('touchmove', function(e){
    e.preventDefault()
    e.stopPropagation()
    var touch = e.touches && e.touches[0]
    if(!touch && !isTouched) return
    var nowY = touch.clientY || touch.screenY
    if(nowY <= 30 || nowY >= window.innerHeight-30) return
    var diffY = nowY - lastY
    this.style.transform = `translateY(${diffY}px)`
  })
  el.addEventListener('touchend', function(e){
    isTouched = false
  })
}
原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2019年4月12日 周五
更新日期 » 2020年8月5日 周三
上一篇 » 抽奖九宫格
下一篇 » [译] Redis遇见Nodejs
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录