創(chuàng)建完項目

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)

      //鼠標按下，計算當前元素距離可視區(qū)的距離
      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中阻止函數(shù)器默認動作的方式 
  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、項目中調(diào)用

<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濒募、項目結(jié)構(gòu)

image.png