可拖动组件 v-drag vue

拖动元素的组件

<template>
  <div class="btn" v-drag>
    <img src="图片地址" alt="" srcset="" />
  </div>
</template>

<script>
export default {
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let oDiv = el; // 获取当前元素
        oDiv.ontouchstart = (e) => {
          // 拖动元素不影响页面其他的滚动
          e.preventDefault();
          // 算出鼠标相对元素的位置
          let disX = e.changedTouches[0].clientX - oDiv.offsetLeft;
          let disY = e.changedTouches[0].clientY - oDiv.offsetTop;

          document.ontouchmove = (e) => {
            // 拖动元素不影响页面其他的滚动
            e.preventDefault();
           
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.changedTouches[0].clientX - disX;
            let top = e.changedTouches[0].clientY - disY;
			// 获取屏幕宽高
			let screenWidth = window.screen.w