如何使用vue操作div(使用Vue)

这次给大家演示一下如何使用Vue操作DIV，使用Vue操作DIV有哪些注意事项？以下是实际案例。让我们来看看。

翻译

demo1.gif

区分客户页面和屏幕层的区别

当我们想要制作拖放效果时，我们需要区分这些属性之间的区别。这些属性都是计算鼠标点击的偏移值，我们需要了解它们才能继续实现我们的拖拽效果。

ClientY指的是离可见页面左上角的距离。pageY是指离可见页面左上角的距离(不受页面滚动的影响)。screenY是指离屏幕左上角的距离。layerY是指从左上角到它或它的父元素最近的位置的距离。offsetY指的是离自己左上角的距离。一张图会给你一个简单的认识。

区分

在我们对这些属性有了简单的了解之后，还有几个属性需要区分。

同分异分，clientY到页面左上角的距离受页面滚动影响，pageY到页面左上角的距离不受页面滚动影响。

同一点和不同点层与元素左上角之间的距离受元素定位的影响。计算第一个定位的元素的左上角和该元素的左上角之间的距离。与元素左上角相比，忽略定位问题，计算内交点。是IE浏览器独有的属性。

分层和分层的区别

实现拖拽功能。

现在我们已经熟悉了这些偏移属性的含义，让我们来关注一下。不多说直接上代码。

//darg.html

& ltstyle & gt#app{ position:相对；/*定位*/top:10px；左:10px宽度:200px高度:200px背景:# 666；/*设置背景*/} :{ { position x } } { { positionY } } & lt；/p & gt；& lt/body & gt；//main . jslet app = new Vue({ El:& # 039；# app & # 039，数据:{ positionX:0，positionY:0，}，方法:{ move(e){ let op = e . target；//获取目标元素//计算鼠标相对于元素的位置let dissx = e . client x-op . offset left；let disY = e . clienty -op . offsettop；document . onmousemove =(e)= & gt；{//鼠标按下移动时的事件//用鼠标位置减去鼠标相对于元素的位置得到元素的位置let left = e . clientx -disX；let top = e . clienty -disY；//将元素位置绑定到positionX和这个上面的positionY，position x = top；this.positionY = left//移动当前元素op . style . left = left+& # 039；px & # 039；op . style . top = top+& # 039；px & # 039；};document . onmouseup =(e)= & gt；{ document.onmousemove = nulldocument.onmouseup = null};} }，计算:{}，})；当然，我们可以将其绑定到自定义指令上，这样通过调用指令就可以实现拖动效果。下面是定义自定义指令的代码。

//darg.html

& ltstyle & gt#app{ position:相对；/*定位*/top:10px；左:10px宽度:200px高度:200px背景:# 666；/*设置背景*/} :& lt；/p & gt；& lt/body & gt；//main . jslet app = new Vue({ El:& # 039；# app & # 039，数据:{}，方法:{}，方向:{拖动:{//指令绑定的定义:函数(El){ let op = El；//获取当前元素op . onmousedown =(e)= >；{//计算出鼠标相对于元素let disx = e . client x-op . offset left的位置；let disY = e . clienty -op . offsettop；document . onmousemove =(e)= & gt；{//用鼠标的位置减去鼠标相对于元素的位置得到元素的位置let left = e . clientx -disX；let top = e . clienty -disY；//将元素位置绑定到positionX和这个上面的positionY，position x = top；this.positionY = left//移动当前元素op . style . left = left+& # 039；px & # 039；op . style . top = top+& # 039；px & # 039；};document . onmouseup =(e)= & gt；{ document.onmousemove = nulldocument.onmouseup = null};};} } }});相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

utils.js用例的详细解释

Nuxt.js SSR权限验证的使用