封装自定义 拖动元素 全局指令

注意：该指令是基于vue2.0封装的

1、HTML代码

注意： 这里transform属性不能开启，否则元素将不能拖到最右边和最下边

<template>
    <div>
        <div v-move class="box">
            <div class="header"></div>
            <div>内容</div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
    return {
    }
  }
 }
</script>
<style scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  /* transform: translate(-50%, -50%); */
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.header {
    height: 20px;
    background: black;
    cursor: move;
  }
</style>

2、instruction.js 文件里加入自定义指令代码（文件结构前面Loading指令有说明）

如果所示：

//按住鼠标移动元素
const move = { //这里的move为指令名称
    inserted(el,binding){
        // 按下鼠标时
        const mouseDown = function(e){
			//按下时候鼠标位置距离浏览器左侧位置 — 盒子左侧距离浏览器左侧的位置
            const x = e.clientX - el.offsetLeft
            //按下时候鼠标位置距离浏览器顶部位置 — 盒子顶部距离浏览器顶部的位置
            const y = e.clientY - el.offsetTop
            // 鼠标移动时
            const move = function(e){ //这里的move为方法名称
                // 鼠标距离浏览器左侧的距离值
                let moveX = e.clientX - x;
                // 鼠标距离浏览器顶部的距离值
                let moveY = e.clientY - y;
                if(moveX <= 0 ){ // 设置水平方向的最小值（最左边）
                    moveX = 0
                }else if(moveX > window.innerWidth - el.offsetWidth){ // 设置水平方向的最大值（最右边）
                    moveX = window.innerWidth - el.offsetWidth
                }
                if(moveY <= 0){ // 设置垂直方向的最小值（最顶部）
                    moveY = 0
                }else if(moveY > window.innerHeight - el.offsetHeight){ // 设置垂直方向的最大值（最底部）
                    moveY =  window.innerHeight - el.offsetHeight
                }
                // 重新设置元素的left top值
                el.style.left = moveX + "px"     
                el.style.top = moveY + "px"
            }
            document.addEventListener("mousemove",move) //监听鼠标移动事件
            document.addEventListener("mouseup",()=>{//鼠标离开时
                document.removeEventListener("mousemove",move) // 移除鼠标移动事件
            })
        }
        el.addEventListener("mousedown",mouseDown)//监听鼠标按下时事件
    }
}
export { debounce, lazy, load , move } //导出指令

index.js：将所有指令导出

import {  load , move} from './instruction'
// 自定义指令
const directives = {
    load,
    move
};
export default {
    install(Vue){
        Object.keys(directives).forEach(key=>{
            Vue.directive(key,directives[key])
        })
    }
}

使用自定move指令

在main.js中引入自定义指令

import Directives from "./directives/index"
Vue.use(Directives);`

页面使用move事件

<template>
    <div>
        <div v-move class="box">
            <div class="header"></div>
            <div>内容</div>
        </div>
    </div>
</template>