vue自定义指令之在某元素内实现元素的拖拽移动

export default {
  inserted(el) {
    let parentElement = el.parentElement; //获取当前元素的父级
    let currentElement = el; //获取当前元素
    currentElement.onmousedown = (e) => {
      //算出鼠标相对元素的位置
      let disX = e.clientX - parentElement.offsetLeft;
      let disY = e.clientY - parentElement.offsetTop;
      let layoutMain = document.getElementsByClassName("main_body")[0];
      document.onmousemove = (e) => {
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        if (left <= 10) {
          left = 10;
        } else if (left >= layoutMain.clientWidth - parentElement.offsetWidth - 50) {
          //document.documentElement.clientWidth 屏幕的可视宽度
          left = layoutMain.clientWidth - parentElement.offsetWidth - 50;
        }
        if (top <= 10) {
          top = 10;
        } else if (top >= layoutMain.clientHeight - parentElement.offsetHeight - 30) {
          // document.documentElement.clientHeight 屏幕的可视高度
          top = layoutMain.clientHeight - parentElement.offsetHeight - 30
        }
        //移动当前元素
        parentElement.style.left = left + 'px';
        parentElement.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
}

import drag from './drag'

const install = function (Vue) {
  Vue.directive('drag', drag)
}

if (window.Vue) {
  window['drag'] = drag
  Vue.use(install);
}

drag.install = install
export default drag

import Vue from "vue"
import drag from "./drag"
Vue.directive("drag", drag);