怎样使用Vue操作DIV（熟练使用vue）

怎样使用Vue操作DIV（熟练使用vue）

这次给大家带来怎样使用Vue操作DIV，使用Vue操作DIV的

注意事项

有哪些，下面就是实战案例，一起来看一下。

效果图

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

demo1.gif

分清clientY pageY screenY layerY offsetY的区别

clientY 指的是距离可视页面左上角的距离pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)screenY 指的是距离屏幕左上角的距离layerY 指的是找到它或它父级元素中最近具有定位的左上角距离offsetY 指的是距离它自己左上角的距离一张图带大家简单了解了解

区别

在我们简单了解完这些个属性以后，有几个属性需要分清。

layerY与offsetY区别

实现拖拽功能

我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。话不多说直接上代码

// darg.html

{{positionX}} {{positionY}} //main.jslet app = new Vue({ el:'#app', data:{ positionX:0, positionY:0, }, methods:{ move(e){ let op = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - op.offsetLeft; let disY = e.clientY - op.offsetTop; document.onmousemove = (e)=>{ //鼠标按下并移动的事件 //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 op.style.left = left + 'px'; op.style- = top + 'px'; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } }, computed:{},});-

当然，我们可以将它绑定为一个自定义指令，这样的话就可以用调用指令的形式来实现拖拽效果，下面是定义自定义指令的代码

// darg.html

//main.jslet app = new Vue({ el:'#app', data:{}, methods:{}, directives: { drag: { // 指令的定义 bind: function (el) { let op = el; //获取当前元素 op.onmousedown = (e) => { //算出鼠标相对元素的位置 let disX = e.clientX - op.offsetLeft; let disY = e.clientY - op.offsetTop; document.onmousemove = (e)=>{ //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 op.style.left = left + 'px'; op.style- = top + 'px'; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; }; } } }});-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。