拖动元素边缘改变宽度

.m_wrapper{display:flex;填充：10px；用户选择：无；}.m_wrapper.side_bar{宽度：250px；高度：300px；背景色：rgba(13,202,240,0.32)；位置：相对；过渡：线性宽度100ms；框大小：边框框；}.m_wrapper.right{margin-left:10px;border:1pxsolid#ccc;}.handle{height:100%;宽度：2px；立场：绝对;右：-1px；顶部：0；过渡：所有线性200ms;}.handle:hover{background-color:#4578FF;cursor:col-resize;}最近需要手动拖动侧边栏菜单来改变它的宽度。如下：要完成这个功能，我们需要了解以下前端知识：鼠标按下、鼠标弹起事件（mousedown、mouseup）鼠标移动事件（mousemove）鼠标按下时在屏幕上的位置clientXmousehovertotheelementmousestylefor为了让调整的过程更顺畅，还需要用到csstransition，差不多就搞定了，准备好了。添加设计图像添加前前前手机.m_wrapper{display:flex;填充：10px；用户选择：无；}.m_wrapper.side_bar{宽度：250px；高度：300px；背景色：rgba(13,202,240,0.32)；位置：相对；过渡：线性宽度100ms；框大小：边框框；}.m_wrapper.right{margin-left:10px;border:1pxsolid#ccc;}.handle{height:100%;宽度：2px；立场：绝对;右：-1px；顶部：0；过渡：所有线性200ms;}.handle:hover{background-color:#4578FF;cursor:col-resize;}添加鼠标移动逻辑在线演示地址文章首发于我的个人博客《IICCOOM-拖动元素边缘改变宽度》