<!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>
原文：https://www.cnblogs.com/snowstorm22/p/10364227.html