vue 鼠标拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0}
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-drag="flag">
            
        </div>


      
       
    </div>


    <div data-id="0"  id="box"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    Vue.directive("drag",(el,{modifiers,value})=>{
        el.style.position = "absolute";
        let {x,y} = modifiers;
       

        el.addEventListener("mousedown",donw);
        
        var disX,disY;
        function donw(e){
            disX = e.offsetX;
            disY = e.offsetY;
            document.addEventListener("mousemove",move);
            document.addEventListener("mouseup",up)


        }

        function move(e){
           var l = e.clientX - disX;
           var t = e.clientY - disY;


            if(value){

                if(x){
                    el.style.left = l + 'px';
                }
                if(y){
                    el.style.top = t + 'px';
                }
                
                if(x&&y || (!x&&!y)){
                    el.style.left = l + 'px';
                    el.style.top = t + 'px';
                }
                 
            }
           
        }

        function up(e){
            document.removeEventListener("mousemove",move);
            document.removeEventListener("mouseup",up);
        }
    })



    new Vue({
        el:"#app",
        data:{
            flag:true,
            msg:"123"
        }
    })
</script>