开箱即用——移动端的简单的按钮拖拽功能

效果图

附带一个视频转gif的网站，free且clean！强推！良心网站~~~i了i了
https://www.aconvert.com/cn/video/mp4-to-gif/

• VUE框架
• H5项目的移动端
• vant组件库（拖拽功能跟组件库没有关系hhO(∩_∩)O哈哈~）
• 用到触摸事件触touchstart、touchmove
• 如果需要可拖动按钮松开之后靠边、隐藏之类的效果，用触摸事件touchend，项目中没有用到我就没写(^▽)

<template>
  <div class="box">
    <van-nav-bar
      title="列表"
      left-arrow
      @click-left="$router.back()"
      safe-area-inset-top
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
    <div>
      <img
        ref="moving"
        @touchmove="drag('moving',$event)"
        @touchstart="touchStartHandle('moving',$event)"
        src="../assets/img/up.png"
        alt=""
        class="gotop"
        @click="goTop()"
      >
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        coordinate:{
          client:{},
          elePosition:{}
        }
      };
    },
    methods: {
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
  
          // 加载状态结束
          this.loading = false;
  
          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },
      touchStartHandle(refName,e){
        let element = e.targetTouches[0]
        // 记录点击的坐标
        this.coordinate.client = {
          x:element.clientX,
          y:element.clientY
        }
        // 记录需要移动的元素坐标
        this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
        this.coordinate.elePosition.top = this.$refs[refName].offsetTop
      },
      drag(refName,e) {
        let element = e.targetTouches[0]
        // 根据初始client位置计算移动距离（元素移动位置+光标移动后的位置-光标点击时的初始位置）
        let x = this.coordinate.elePosition.left +(element.clientX - this.coordinate.client.x)
        let y = this.coordinate.elePosition.top +(element.clientY - this.coordinate.client.y)
        // 限制可移动距离，不超出可视区域
        x= x<=0 ? 0 : x>=innerWidth-this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
        // 50是头部的高度
        y= y<=50 ? 50 : x>=innerHeight-this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
        // 移动当前元素
        this.$refs[refName].style.left = x + 'px'
        this.$refs[refName].style.top = y + 'px'
      },
      /**
      * 返回顶部
      */
      goTop() {
        document.getElementsByClassName('box')[0].scrollTop = 0
      }
    }
  }
</script>
<style scoped>
.box {
  height:100vh;
  overflow:scroll;
}
.gotop {
  position:absolute;
  top:90vh;
  left:320px;
}
</style>

附带一个电脑端制作gif的完整教程：https://blog.csdn.net/cy1502/article/details/122212239?spm=1001.2014.3001.5502