Vue项目使用v-drag实现拖拽功能

话不多说直接上代码

<template>
  <div class="drag">
    <div class="area">
      <div ref="element" class="content" v-drag draggable="false">
        <p>文字网页</p>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      dd: "",
      inout: "",
    };
  },
  directives: {
    drag(el) {
      let oDiv = el; //当前元素
      let self = this; //上下文
      //禁止选择网页上的文字
      document.onselectstart = function () {
        return false;
      };
      oDiv.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          //通过事件委托，计算移动的距离
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          // 获取html可视区域高度
          const width = document.querySelector(".area").clientWidth;
          const height = document.querySelector(".area").clientHeight;
          if (l >= width - 100) {
            l = width - 100;
          } else if (l <= 0) {
            l = 0;
          }
          if (t >= height - 100) {
            t = height - 100;
          } else if (t <= 0) {
            t = 0;
          }
          //移动当前元素
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
      };
    },
  },
};
</script>
<style>
.drag {
  position: relative;
}
/* position:absolute;这个还是要设的，不然拖动块定不了位置 */
.area{
  width: 500px;
  height: 500px;
  background-color: red
}
.content {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #67c23a;
  cursor: pointer;
}
</style>