从拖一拖拽一拽到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
  })
}

快速跳转 » 全部文章 » language

过去 » 抽奖九宫格

未来 » Redis遇见Nodejs·译

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

发布日期 » 2019年4月12日 星期五

我要留言