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

下一篇《Redis遇见Nodejs[译]》

上一篇《抽奖九宫格》

快速跳转 心头好文 - css - 《从拖一拖拽一拽到CSS3平移变换》

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

版权声明 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证