div中通过flex布局水平放3个子div,其中一个div可以拖拽改变宽度
时间: 2024-02-20 16:58:39 浏览: 37
可以使用flex布局和JavaScript的事件监听实现这个效果。以下是一个简单的示例代码:
HTML代码:
```html
<div class="container">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item resizable" id="item3"></div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 30%;
height: 100px;
background-color: #ccc;
}
.resizable {
cursor: col-resize;
}
```
JavaScript代码:
```javascript
const resizableItem = document.querySelector('.resizable');
let startX = 0;
let startWidth = 0;
resizableItem.addEventListener('mousedown', e => {
startX = e.pageX;
startWidth = parseInt(getComputedStyle(resizableItem).width);
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
});
const resize = e => {
const width = startWidth + e.pageX - startX;
resizableItem.style.width = `${width}px`;
};
const stopResize = () => {
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
};
```
这段代码会将三个子`div`水平布局,并且给第三个子`div`添加一个`resizable`的类来表示它可以拖拽改变宽度。当鼠标按下时,会记录下起始的鼠标位置和起始的宽度,然后在鼠标移动时计算出新的宽度并设置给该子`div`的`width`属性。当鼠标抬起时,移除事件监听器,拖拽改变宽度的效果就完成了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)