Vue.js----创建自定义指令实现拖拽效果

创建自定义指令的2种方式：全局、局部
1、全局
Vue.directive(name,(el,{value,modifiers})=>{})
说明：name指令名称;()=>{}指令实现的函数;el当前元素;对象{value表达式的结果,modifiers修饰符}
2、局部
let vm = new Vue({
　　directives:{name:(el,{value,modifiers})=>{}}
})
以下通过全局和局部分别创建自定义指令来实现拖拽效果，请见下面代码（局部方式暂时已被注释）：
<!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>vue-drag</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            position: relative;
        }
        #box1,#box2,#box3,#box4,#box5{
            width:100px;
            height:100px;
            background: red;
            position: absolute;
            left:0;
            top:0;
        }
        #box2{
            left:120px;
            background: blue;
        }
        #box3{
            left:240px;
            background: yellow;
        }
        #box4{
            left:360px;
            background: green;
        }
        #box5{
            left:480px;
            background: purple;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="box1" v-drag.x.y="true"></div>
        <div id="box2" v-drag="true"></div>
        <div id="box3" v-drag.x="true"></div>
        <div id="box4" v-drag.y="true"></div>
        <div id="box5" v-drag="false"></div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局自定义指令
    Vue.directive("drag",(el,{value,modifiers})=>{
        if(value){
            let box = el;
            let {x,y} = modifiers;
            //盒子对象的鼠标按下事件
            box.onmousedown = (e) => {
                //鼠标相对元素的位置
                let disX = e.clientX - box.offsetLeft;
                let disY = e.clientY - box.offsetTop;
                //鼠标移动事件
                document.onmousemove = (e)=>{
                    //元素的位置=鼠标位置-鼠标相对元素的位置
                    let leftA = e.clientX - disX;    
                    let topA = e.clientY - disY;
                    //设置边界
                    let left = leftA < 0 ? 0 : leftA > window.innerWidth - box.offsetWidth ? window.innerWidth - box.offsetWidth : leftA;
                    console.log(document.body.clientHeight)
                    let top = topA < 0 ? 0 : topA > window.innerHeight - box.offsetHeight ? window.innerHeight - box.offsetHeight : topA;
                    //判断x轴还是y轴移动：当xy均存在或均不存在时默认xy轴均能拖拽，仅x则x轴拖拽，仅y则y轴拖拽
                    if(x&&y){
                        box.style.left = left + 'px';
                        box.style.top = top + 'px';
                    }else if(!x && !y){
                        box.style.left = left + 'px';
                        box.style.top = top + 'px';
                    }else if(x){
                        box.style.left = left + 'px';
                    }else if(y){
                        box.style.top = top + 'px';
                    }else{
                        return;
                    }
                }
                //鼠标弹起事件：清空移动事件
                document.onmouseup = (e)=>{
                    document.onmousemove = null;
                }
            }
        }
    })

    let vm = new Vue({
        el:'#app',
        data:{},
        //局部自定义指令
        /*
        directives: {
            "drag":(el,{value,modifiers})=>{
                if(value){
                    let box = el;
                    let {x,y} = modifiers;
                    //盒子对象的鼠标按下事件
                    box.onmousedown = (e) => {
                        //鼠标相对元素的位置
                        let disX = e.clientX - box.offsetLeft;
                        let disY = e.clientY - box.offsetTop;
                        //鼠标移动事件
                        document.onmousemove = (e)=>{
                            //元素的位置=鼠标位置-鼠标相对元素的位置
                            let leftA = e.clientX - disX;    
                            let topA = e.clientY - disY;
                            //设置边界
                            let left = leftA < 0 ? 0 : leftA > window.innerWidth - box.offsetWidth ? window.innerWidth - box.offsetWidth : leftA;
                            console.log(document.body.clientHeight)
                            let top = topA < 0 ? 0 : topA > window.innerHeight - box.offsetHeight ? window.innerHeight - box.offsetHeight : topA;
                            //判断x轴还是y轴移动：当xy均存在或均不存在时默认xy轴均能拖拽，仅x则x轴拖拽，仅y则y轴拖拽
                            if(x&&y){
                                box.style.left = left + 'px';
                                box.style.top = top + 'px';
                            }else if(!x && !y){
                                box.style.left = left + 'px';
                                box.style.top = top + 'px';
                            }else if(x){
                                box.style.left = left + 'px';
                            }else if(y){
                                box.style.top = top + 'px';
                            }else{
                                return;
                            }
                        }
                        //鼠标弹起事件：清空移动事件
                        document.onmouseup = (e)=>{
                            document.onmousemove = null;
                        }
                    }
                }
            }
        }
        */
    })
</script>
Vue.js----创建自定义指令实现拖拽效果

猜你喜欢
