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

<template>
  <div class="dragContent" v-drag="drag" ref="drag">
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {},
  methods:{
    drag(val, el) {
      this.$refs.drag.style.left = val.x;
      this.$refs.drag.style.top = val.y;
      console.log(val, el)
      this.$emit('confirmPoint',val)
    }
  }
}
</script>
<style lang="less" scoped>
.dragContent {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

3、项目中调用

<template>
  <div>
    <h1>我是Index</h1>
    <div class="content">
      <div class="menu">
        <drag @confirmPoint="confirmPoint">
          <div class="block">拖我</div>
        </drag>
      </div>
      <div class="menuContent"></div>
    </div>
  </div>
</template>
<script>
import drag from '@/components/drag.vue'
export default {
  components: { drag },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    confirmPoint(val, el) {
      console.log(val, el)
    }
  }
}
</script>

<style lang="less" scoped>
h1 {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: red;
}
.content {
  width: 100%;
  height: calc(100vh - 30px);
  display: flex;
  flex-direction: row;
  .menu {
    width: 150px;
    height: 100%;
    background: lightblue;
    .block {
      width: 50px;
      height: 50px;
      background: red;
      cursor: pointer;
    }
  }
  .menuContent {
    flex: 1;
    height: 100%;
    background: lightgray;
  }
}
</style>

4、项目结构

image.png