vue2 自定义拖拽

methods:{ 
// 自定义拖拽
  directives: {
    // 自定义拖拽指令，先声明这个指令
    drag(el) {
      // 可就在里写指令的js代码
      const oDiv = el; // 当前元素
      document.onselectstart = () => {
        return false;
      };
      oDiv.onmousedown = (e) => {
        // 鼠标按下时的鼠标所在的X，Y坐标
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - oDiv.offsetLeft;
        const disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = (e) => {
          // 通过事件委托，计算移动的距离
          // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
          const l = e.clientX - disX;
          const t = e.clientY - disY;
          // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = (e) => {
          // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
          document.onmousemove = null;
          document.onmouseup = null;
        };
        // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
      };
    },
  },
}

    <div class="video_data" v-drag >
            里边包裹的是你要拖拽的内容
    </div>