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; color:#fff; } #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="flag">1-XY轴拖拽</div> <div id="box2" v-drag="flag">2-XY轴拖拽</div> <div id="box3" v-drag.x="flag">3-仅X轴拖拽</div> <div id="box4" v-drag.y="flag">4-仅Y轴拖拽</div> <div id="box5" v-drag="flag2">5-禁止拖拽</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 {x,y} = modifiers; //目标对象的鼠标按下事件 el.onmousedown = (e) => { //鼠标相对元素的位置 let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; //document的鼠标移动事件 document.onmousemove = (e)=>{ //元素的位置=鼠标位置-鼠标相对元素的位置 let leftA = e.clientX - disX; let topA = e.clientY - disY; //设置边界 let left = leftA < 0 ? 0 : leftA > window.innerWidth - el.offsetWidth ? window.innerWidth - el.offsetWidth : leftA; console.log(document.body.clientHeight) let top = topA < 0 ? 0 : topA > window.innerHeight - el.offsetHeight ? window.innerHeight - el.offsetHeight : topA; //判断x轴还是y轴移动：当xy均存在或均不存在时默认xy轴均能拖拽，仅x则x轴拖拽，仅y则y轴拖拽 if((x&&y)||(!x && !y)){ el.style.left = left + 'px'; el.style.top = top + 'px'; }else if(x){ el.style.left = left + 'px'; }else if(y){ el.style.top = top + 'px'; } } //document的鼠标弹起事件：清空鼠标移动和弹起事件 document.onmouseup = (e)=>{ document.onmousemove = null; document.onmouseup = null; } } } }) let vm = new Vue({ el:'#app', data:{ flag:true, flag2:false, }, //局部自定义指令 /* directives: { "drag":(el,{value,modifiers})=>{ if(value){ let {x,y} = modifiers; //目标对象的鼠标按下事件 el.onmousedown = (e) => { //鼠标相对元素的位置 let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; //document的鼠标移动事件 document.onmousemove = (e)=>{ //元素的位置=鼠标位置-鼠标相对元素的位置 let leftA = e.clientX - disX; let topA = e.clientY - disY; //设置边界 let left = leftA < 0 ? 0 : leftA > window.innerWidth - el.offsetWidth ? window.innerWidth - el.offsetWidth : leftA; console.log(document.body.clientHeight) let top = topA < 0 ? 0 : topA > window.innerHeight - el.offsetHeight ? window.innerHeight - el.offsetHeight : topA; //判断x轴还是y轴移动：当xy均存在或均不存在时默认xy轴均能拖拽，仅x则x轴拖拽，仅y则y轴拖拽 if((x&&y)||(!x && !y)){ el.style.left = left + 'px'; el.style.top = top + 'px'; }else if(x){ el.style.left = left + 'px'; }else if(y){ el.style.top = top + 'px'; } } //document的鼠标弹起事件：清空鼠标移动和弹起事件 document.onmouseup = (e)=>{ document.onmousemove = null; document.onmouseup = null; } } } } } */ }) </script>
