模板部分

    1. <template>
    2.   <div class="home">
    3.     <div id="box" v-drag></div>
    4.   </div>
    5. </template>

    自定义指令 

    1. <script>
    2.   // @ is an alias to /src
    4.   export default {
    5.     name: "Home",
    6.     data() {return {}},
    7.     directives: {
    8.       drag: {
    9.         // 指令的定义
    10.         inserted: function(el) {
    11.           // el.drag();
    12.           console.log(el);
    13.           //获取元素
    14.           // var dv = document.getElementById("dv");
    15.           let x = 0;
    16.           let y = 0;
    17.           let l = 0;
    18.           let t = 0;
    19.           let isDown = false;
    20.           //鼠标按下事件
    21.           el.onmousedown = function(e) {
    22.             //获取x坐标和y坐标
    23.             x = e.clientX;
    24.             y = e.clientY;
    26.             //获取左部和顶部的偏移量
    27.             l = el.offsetLeft;
    28.             t = el.offsetTop;
    29.             //开关打开
    30.             isDown = true;
    31.             //设置样式
    32.             el.style.cursor = "move";
    33.           };
    34.           //鼠标移动
    35.           window.onmousemove = function(e) {
    36.             if (isDown == false) {
    37.               return;
    38.             }
    39.             //获取x和y
    40.             let nx = e.clientX;
    41.             let ny = e.clientY;
    42.             //计算移动后的左偏移量和顶部的偏移量
    43.             let nl = nx - (x - l);
    44.             let nt = ny - (y - t);
    46.             el.style.left = nl + "px";
    47.             el.style.top = nt + "px";
    48.           };
    49.           //鼠标抬起事件
    50.           el.onmouseup = function() {
    51.             //开关关闭
    52.             isDown = false;
    53.             el.style.cursor = "default";
    54.           };
    55.         }
    56.       }
    57.     }
    58.   };
    59. </script>

    样式部分

    1. <style lang="scss" scoped>
    2. #box {
    3.   width: 60px;
    4.   height: 60px;
    5.   background-color: darkorange;
    6.   border-radius: 50%;
    7.   position: absolute;
    8.   //脱离文档流
    9. }
    10. </style>