前端三大家族之offset,然后做出鼠标的拖拽效果
【前端三大家族之offset,然后做出鼠标的拖拽效果】offset 用于获取元素的偏移量:
可以获取元素距离带有定位的父元素的位置【注意条件需要有定位】,如果父元素没有定位,则会向上寻找直到找到带有定位的那个父级元素
offsetTop:获取到元素距离带有定位的父元素的顶部的距离
offsetLeft:获取到元素距离带有定位的父元素的左边的距离
可以获取元素本身的大小(获取到的值不带单位), padding + width + border
offsetWidth:获取到元素的宽度
offsetHeight:获取到元素的高度
了解了 offsetTop 和 offsetLeft 之后我们就可以做一个拖拽元素的小练习了,实现思路如下图:
文章图片
代码如下:
Document - 锐客网 *{
padding: 0;
margin: 0;
}
body{
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
推荐阅读
- Android开发之记账本开发第三天
- 三分钟,利用 Termux 将你的安卓手机变成 linux 服务器 (非密钥)
- FinClip小程序+Rust(三)(一个加密钱包)
- Jmeter-APP脚本录制
- Unity和安卓的交互
- es 修改 mapping 字段类型
- 虚拟机准备
- Android中三种创建监听器的方法
- 投稿|露营大火,也救不了三夫户外?
- 2-前端技术栈|JavaScript框架从入门到精通