CSS3变换属性实现拖一拖拽一拽

全篇共 693 字。按500字/分钟阅读,预计用时 1.4 分钟。总访问 260 次,日访问 4 次。

图片源自网络

思路

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
  })
}