vue简单拖拽指令

<template>
    <div>
      <div class="box1 active" v-drag></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    Vue.directive('drag', {
        bind(el,binding){

           el.onmousedown =function(e){
                console.log('haha')

                var keyx = e.pageX - el.offsetLeft;
                var keyy = e.pageY - el.offsetTop;

                document.onmousemove = function(e){
                    console.log('haha2')
                    el.style.left = e.pageX - keyx + 'px';
                    el.style.top = e.pageY - keyy +'px';
                }

                document.onmouseup = function(){
                    document.onmousemove = document.onmousedown = null;
                }

                e.preventDefault;
            }
        }
    })

    export default{
       data(){
            return{

            }
       },

    }
</script>