vue里用v-vue for循环环出来的图片在:style重新赋值backgroundPosition的值

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

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

在我们想要做出拖拽这个效果的时候我们需要分清这几个属性的区别,这几个屬性都是计算鼠标点击的偏移值我们需要对其进行了解才可以继续实现我们的拖拽效果

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

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

受元素的定位的影响,会从本え素往上找到第一个定位的元素的左上角
计算相对于本元素的左上角不在乎定位问题,计算的是内交点是的特有属性

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

//算出鼠标相对元素的位置 //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置

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

//算出鼠标相对元素的位置 //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置

相信看了本文案例你已经掌握了方法更多精彩请关注php中文网其它相关文章!


以上就是怎样使用Vue操作DIV的详细内容,更多请关注php中文网其它相关文章!

我要回帖

更多关于 vue for循环 的文章

 

随机推荐