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

本文链接：https://blog.csdn.net/hanq2016/article/details/135213723

1. HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>移动端拖拽效果</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/task1.css" />
    <script src="js/rem.js"></script>
    <script src="js/touch-0.2.14.js"></script>
    <script src="js/zepto.min.js"></script>
  </head>
  <body>
    <div class="box"></div>
    <script src="js/task1.js"></script>
  </body>
</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
  })
})