SOURCE

console 命令行工具 X clear

                    
>
console
/*
        * 创建自定义的指令
        * */
        Vue.directive('drag', {
            // 当指令绑定到元素上的时候执行
            bind(el, binding) {
                // console.log('bind');
                // 当前指令绑定的dom元素
                //console.log(el);
                // 指令传入的参数、修饰符、值  v-指令名称:参数.修饰符=值
                // console.log(binding)

                el.onmousedown = function(e) {
                    let disX = e.clientX - el.offsetLeft;
                    let disY = e.clientY - el.offsetTop;

                    document.onmousemove = function(e) {

                        let L = e.clientX - disX;
                        let T =  e.clientY - disY;

                        if (binding.modifiers.limit) {  //v-drag.limit 限制范围

                            if (L < 0) {
                                L = 0;
                            }
                        }

                        el.style.left = L + 'px';
                        el.style.top = T + 'px';
                    };

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

                    return false;
                }
            }
        });

        new Vue({
            el: '#app'
        });
<div id="app">
    <div id="box1" v-drag.limit></div>
    <div id="box2" v-drag></div>
</div>
#box1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: red;
}
#box2 {
    position: absolute;
    left: 300px;
    top: 0;
    width: 100px;
    height: 100px;
    background: green;
}