h5实现移动拖拽功能

前言

Hi~ 友友们好呀~ 最近在移动端h5项目中需要做一个可拖动的弹层，项目ui框架选择的vant-ui，那么如何实现可拖动效果呢，一起来coding吧~

<template>
  <div class="popop-comp">
    <van-popup
      v-model:show="show"
      :overlay="false"
      round
      position="bottom"
      :safe-area-inset-top="true"
      :safe-area-inset-bottom="true"
      :style="{ height: heightNum }"
    >
      <div class="move-sign" @touchstart.prevent="mousedown" @touchEnd="mouseup"></div>
      <slot></slot>
    </van-popup>
  </div>
</template>
<script setup lang="ts" name="PopopComp">
const show: boolean = true
let heightNum = ref('300px')
const mousedown = (e) => {
  const min = 80 // 底部安全阀值
  e.target.ontouchmove = (event) => {
    let value = Math.abs(window.innerHeight - event.touches[0].clientY)
    if (value < min) value = min
    heightNum.value = value + 'px'
  }
}
const mouseup = (e) => {
  e.target.onmousemove = null
}
</script>

结束语

这样，就可以实现移动h5简单的拖拽功能啦~