vue自定义指令之拖动页面的元素

此案例中，用到了鼠标事件onmousedown、onmousemove、onmouseup

源代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer div{
            position:absolute;
            width: 100px;
            height: 100px;
        }
        .outer .left{
            background-color: red;
            top:0;
            left:0;
        }
        .outer .right{
            background-color: blue;
            top:0;
            right:0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="outer">
        <div class="left" v-drag></div>
        <div class="right" v-drag></div>
    </div>
</div>
<script src="vue.js"></script>
<script>
    Vue.directive('drag',function(el){
        el.onmousedown = function(e){
            //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
            var divx = e.clientX - el.offsetLeft;
            var divy = e.clientY - el.offsetTop;
            //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
            document.onmousemove = function(e){
                //获取移动后div的位置：鼠标位置-divx/divy
                var l = e.clientX - divx;
                var t = e.clientY - divy;
                el.style.left=l+'px';
                el.style.top=t+'px';
            }
            document.onmouseup = function(e){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

    })
   var vm = new Vue({
       el:'#app'

   })
</script>
</body>
</html>

posted on 2018-04-03 20:17  平平淡淡summer  阅读(4861)  评论(0)  编辑  收藏  举报

导航