vue简单拖拽指令

最新推荐文章于 2024-08-29 15:10:00 发布

荷兰豆叶子上的水熊

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量833

点赞数 1

分类专栏： vue vue拖拽指令文章标签： vue拖拽指令

本文链接：https://blog.csdn.net/u010200033/article/details/80210683

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue拖拽指令

1 篇文章 0 订阅

订阅专栏

<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>