博客

移动端实现对div的拖动功能，需要先要知道以下移动端的一些原生事件和方法；本质上和pc端的操作是一样的；

pc端实现对div的拖动功能 ：

链接

事件

方法

注意：手指移动也会触发滚动屏幕(如果宽度溢出出现滚动条的话)，所以要阻止默认的屏幕滚动 event.

preventDefault

();

拖动原理

：

主要是改变定位元素的定位值来实现位置的移动；定位值 = 手指滑动中的位置 – 手指刚触摸时候的初始位置 和距离限制；

实现代码：

<template>
  <!-- 移动端拖拽实现 -->
  <div class="dropContainer">
    <div id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)" class="drop"></div>
  </div>
</template>

<script>
export default {
  name: "dropContainer",
  data() {
    return {
      DropEl: null,
      dropContainer: null,
      // 元素未拖动时的初始位置 绑定的是行内样式
      style: {
        top: "100px",
        left: "100px"
      },
      // 位置差
      disX: 0,
      disY: 0
    };
  },
  computed: {},
  mounted() {
    // 获取元素
    this.DropEl = document.getElementById("Drop");
    this.dropContainer = document.getElementsByClassName("dropContainer")[0];
  },
  methods: {
    // 手指落下时触发
    touchstart(event) {
      // 1，计算位置差 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到拖动元素内实际点击的位置
      // pageX 永远大于等于 offsetLeft pageY也是同理
      this.disX = event.targetTouches[0].pageX - this.DropEl.offsetLeft;
      this.disY = event.targetTouches[0].pageY - this.DropEl.offsetTop;
    },

    // 手指移动时触发
    touchmove(event) {
      // 2，获取手指移动的实时位置  需要减去位置差
      let moveX = event.targetTouches[0].pageX - this.disX;
      let moveY = event.targetTouches[0].pageY - this.disY;

      // 3，获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ，建议放在外面进行获取
      let dragHeight = this.DropEl.offsetHeight;
      let dragWidth = this.DropEl.offsetWidth;
      let dragContainerWidth = this.dropContainer.offsetWidth; //获取容器的高度和宽度
      let dragContainerHeight = this.dropContainer.offsetHeight;

      // 4，控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
      if (moveX <= 0) {
        moveX = 0;
      }
      // 上边界
      if (moveY <= 0) {
        moveY = 0;
      }
      //下边界  容器高度 - 拖动元素高度
      if (moveY >= dragContainerHeight - dragHeight) {
        moveY = dragContainerHeight - dragHeight;
      }
      //右边界   容器宽度 - 拖动元素宽度
      if (moveX >= dragContainerWidth - dragWidth) {
        moveX = dragContainerWidth - dragWidth;
      }
      // 5，开始移动
      this.style.left = moveX + "px";
      this.style.top = moveY + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
.dropContainer {
  width: 100%;
  height: 100vh;
}
.drop {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 5px solid red;
  border-radius: 50%;
  background-color: red;
  text-align: center;
}
</style>