vue移动端实现拖拽

前言：

前言：最近一直忙于生活中的事情，今天有时间写个日记吧=吧，在开发移动端的时候经常用到拖拽模块 ，移动端拖拽事件也是开发中经常用到的情况，所以现在自己整一个，废话不多说

---

代码部分:

在components里面创建一个公共组件，dragMove.vue

写下如上代码：（你们直接复制就可以使用）

<!-- 拖拽滑动效果 -->
<template>
  <div id="item_box" @click="goMove" @touchstart="down" @touchmove="move"         
  @touchend="end">
       //这里注意，我使用了阿里图标，你们使用的话，删除掉写自己的样式就好
    <i class="iconfont icon-a-bianlidian2x"></i>
  </div>
</template>

<script>
export default {
  name: "defaultDrag",
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
    };
  },
  methods: {
    goNext() {
      this.$emit("goMove");
    },
    // 实现移动端拖拽
    down() {
      let item_box = document.querySelector("#item_box");
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.maxW = document.body.clientWidth - item_box.offsetWidth;
      this.maxH = document.body.clientHeight - item_box.offsetHeight;

      this.position.x = touch.clientX - item_box.offsetLeft;
      this.position.y = touch.clientY - item_box.offsetTop;
      this.dx = touch.clientX;
      this.dy = touch.clientY;
    },
    move(event) {
      event.preventDefault();
      let item_box = document.querySelector("#item_box");
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;

        if (this.nx < 0) {
          this.nx = 0;
        } else if (this.nx > this.maxW) {
          this.nx = this.maxW;
        }

        if (this.ny < 0) {
          this.ny = 0;
        } else if (this.ny >= this.maxH) {
          this.ny = this.maxH;
        }

        item_box.style.left = this.nx + "px";
        item_box.style.top = this.ny + "px";
        document.addEventListener(
          "touchmove",
          function() {
            // event.preventDefault()
          },
          false
        );
      }
    },
    //鼠标释放
    end() {
      this.flags = false;
    },
  },
};
</script>


<style  lang="scss" scoped>
#item_box {
  width: 1rem;
  height: 1rem;
  position: fixed;
  z-index: 1000;
  bottom: 60px;
  right: 0.4rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0.4rem 2px skyblue;
  background: #81f8e8;
  display: flex;
  justify-content: center;
  align-items: center;
  .iconfont {
    color: orange;
  }
}
</style>

然后在你们需要使用拖拽的组件中引入 dragMove.vue子组件  就好  

（不要忘记在components中注册子组件哟）

//：goMove是子传夫的事件，不用执行任何步骤，写到methods中就好
<dragMove  @goMove="watchCar"></dragMove>

效果图如下：

都给俺点赞！！！