实现盒子宽度随鼠标位置而改变
实现 改变 位置 鼠标 宽度 盒子
2023-06-13 09:12:15 时间
结构与样式
<div class="leftCategory">
<div class="drag-line"></div>
</div>
.leftCategory {
position: relative;
width: 200px;
}
.drag-line{
position: absolute;
top:0;
right:0;
width: 6px;
height: 100vh;
z-index: 99;
cursor: e-resize;
}
实现思路
当鼠标在拖动线(drag-line)区域内按下时,监听鼠标移动,获取鼠标移动的实时距离 将这个距离加上leftCategory
本来的宽度,就是leftCategory
随着鼠标移动的宽度
代码实现
// 获取元素在页面中的位置(X)
function getElementLeft(element) {
var actualLeft = element.offsetLeft; // 获取元素距离父元素的距离
var current = element.offsetParent; //这是获取父元素
while (current !== null) { //当它上面有元素时就继续执行
actualLeft += current.offsetLeft; //这是获取父元素距它的的父元素左上角的距离
current = current.offsetParent;
}
return actualLeft;
}
// 实现左侧分类树宽度自由改变
function treeAutoWidth(){
// 获取当前拖动线在body中的位置
let dragLinePositionX = 0
// 鼠标实际移动的距离
let mouseDistance = 0
let dragLine = document.querySelector('.drag-line')
let leftCategory = document.querySelector('.leftCategory')
dragLine.onmousedown=function(e){
document.onmousemove = function(e){
dragLinePositionX = getElementLeft(dragLine)+dragLine.clientWidth
// 鼠标实际移动的距离 = 鼠标在body的位置减去 拖动线在body中的位置
mouseDistance = e.x - dragLinePositionX
dragLine.style.transform=`translateX(${mouseDistance}px)`
leftCategory.style.width=`${leftCategory.clientWidth + mouseDistance}px`
}
document.onmouseup=function(){
document.onmouseup=null;
document.onmousemove=null;
};
}
}
export default treeAutoWidth
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 高频js手写题之实现数组扁平化、深拷贝、总线模式
- 【深度学习项目一】全连接神经网络实现mnist数字识别
- 利用 Tanzu Application Platform 实现应用云调试与面向开发者的应用运行状态监控
- mongodb实现数组对象求和方法实例
- 架构Oracle:靠它实现系统无忧(oracle靠靠靠)
- Linux改变拥有者权限:轻松实现(linux更改拥有者)
- 实现Linux网络底层:深入了解实现原理(linux网络底层)
- MySQL改变排序规则 实现最佳排序结果(mysql修改排序规则)
- 改变Linux系统实现出口IP地址改变(linux出口ip)
- 数据库本地连接远程Oracle数据库:实现双向互联(本地连接远程oracle)
- SQL Server派生表:实现快速、有效的数据库管理(sqlserver派生表)
- SQL Server架构实现多主库:改变业务格局(sqlserver多主库)
- 过程SQL Server储存过程:实现快速便捷操作(sqlserver储存)
- Linux改变身份:实现权限的转变(linux改组id)
- 案例Redis实现成功,改变行业格局(自己写个redis成功)
- core改变发展轨迹基于NETCore环境实现Redis缓存(缓存redis类net)
- 改变用户体验Redis实现用户统计(用户统计redis)
- MySQL加减运算实现探究(mysql中加减运算)
- 实现可靠的云部署使用Redis读写分离(云redis读写分离)
- 使用MYSQL实现不同表分组求和(mysql不同表分组求和)
- 主页面中的两个iframe实现鼠标拖动改变其大小
- jquery实现带单选按钮的表格行选中时高亮显示
- jquery简单实现鼠标经过导航条改变背景图
- jQuery动态改变图片显示大小(修改版)的实现思路及代码
- js实现动态改变字体大小代码
- JS操作CSS随机改变网页背景实现思路
- js实现键盘控制DIV移动的方法
- JavaScript中的类与实例实现方法
- Python实现partial改变方法默认参数