vue自定义拖拽指令

创建完项目

1、main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js";
import "@/assets/css/common.css";

Vue.config.productionTip = false

Vue.directive('drag', {
  bind: function (el, binding) {
    let oDiv = el;   //当前元素
    oDiv.onmousedown = function (e) {
      stopDefault()
      // 允许拖拽的最大距离
      let maxWidth = window.innerWidth - parseInt(window.getComputedStyle(oDiv).width)
      let maxHeight = window.innerHeight - parseInt(window.getComputedStyle(oDiv).height)

      //鼠标按下，计算当前元素距离可视区的距离
      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;
        //移动当前元素  
        l = l >= maxWidth ? maxWidth : l <= 0 ? 0 : l;
        t = t >= maxHeight ? maxHeight : t <= 0 ? 0 : t;

        oDiv.style.left = l + 'px';
        oDiv.style.top = t + 'px';
        
      };
      document.onmouseup = function (e) {
         //将此时的位置传出去
        let x = e.pageX >= maxWidth ? maxWidth : e.pageX <= 0 ? 0 : e.pageX;
        let y = e.pageY >= maxHeight ? maxHeight : e.pageY <= 0 ? 0 : e.pageY;
        binding.value({ x, y }, el)
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

//阻止浏览器的默认行为 
function stopDefault(e) {
  //阻止默认浏览器动作(W3C) 
  if (e && e.preventDefault)
    e.preventDefault();
  //IE中阻止函数器默认动作的方式 
  else
    window.event.returnValue = false;
  return false;
}

2、拖拽的组件

drag.vue

3、项目中调用

4、项目结构

image.png