使用zepto结合touchjs实现元素的拖动效果

1. HTML部分

2. CSS部分

.box {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2rem;
  height: 2rem;
  background-color: blue;
}

3. js部分

$(function () {
  // 获得.box元素
  let box = $('.box')
  // 获得.box元素left值
  let left = Number.parseFloat(box.css('left'))
  // 获得.box元素top值
  let top = Number.parseFloat(box.css('top'))
  // 获得.box元素最大top值
  let maxTop = $(window).height() - box.height()
  // 获得.box元素最大left值
  let maxLeft = $(window).width() - box.width()
  // 元素被拖动时，在x, y轴向上的位移距离
  let x = 0
  let y = 0
  // 监听box的拖动事件
  box.on('drag', function (e) {
    // 获得触摸点在屏幕上x, y轴向上的偏移量distanceX，distanceY
    let {
      detail: { distanceX, distanceY },
    } = e
    x = distanceX
    y = distanceY
    // 计算当前元素拖动后的top值
    let currentTop = y + top
    // 判断最小的top值为0
    if (currentTop < 0) {
      currentTop = 0
    }
    // 判断box元素的最大top值为maxTop
    if (currentTop > maxTop) {
      currentTop = maxTop
    }
    // 计算当前元素拖动后的left值
    let currentLeft = left + x
    // 判断最小的left值为0
    if (currentLeft < 0) {
      currentLeft = 0
    }
    // 判断box元素的最大left值为maxLeft
    if (currentLeft > maxLeft) {
      currentLeft = maxLeft
    }
    // 设置box元素的top,left值
    $(this).css({ top: currentTop, left: currentLeft })
  })
  // 拖动结束时要重置top和left的值
  box.on('dragend', function () {
    // 拖动结束后，重置元素的left,top
    left += x
    top += y
  })
})

4. 总结

项目依赖touch-0.2.14.js中的drag和dragend事件，同时利用zepto计算和设置元素的样式，监听darg和dragend事件，最后要重置元素的top和left值，否则效果不正确