<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
height: 300px;
}
.list-page {
width: 30%;
background-color: #ccc;
}
.list-detail {
flex: 1;
background-color: #eee;
}
.drag-line {
width: 3px;
background-color: #999;
cursor: ew-resize;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="list-page">
<h2>列表区域</h2>
</div>
<div class="drag-line" id="drag-line"></div>
<div class="list-detail">
<h2>详情区域</h2>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
const dragLine = document.getElementById('drag-line');
const container = document.querySelector('.container');
const listPage = document.querySelector('.list-page');
let startX = 0;
let dragWidth = 0;
dragLine.addEventListener('mousedown', startDrag);
dragLine.addEventListener('touchstart', startDrag);
function startDrag(event) {
event.preventDefault();
startX = event.clientX || event.touches[0].clientX;
dragWidth = listPage.offsetWidth;
document.documentElement.addEventListener('mousemove', doDrag);
document.documentElement.addEventListener('touchmove', doDrag);
document.documentElement.addEventListener('mouseup', stopDrag);
document.documentElement.addEventListener('touchend', stopDrag);
}
function doDrag(event) {
const clientX = event.clientX || event.touches[0].clientX;
const offsetX = clientX - startX;
const containerWidth = container.offsetWidth;
let newDragWidth = dragWidth + offsetX;
// 添加最小宽度和最大宽度限制
if (newDragWidth < 100) {
newDragWidth = 100;
} else if (newDragWidth > 800) {
newDragWidth = 800;
}
const newListPageWidth = (newDragWidth / containerWidth) * 100;
const newListDetailWidth = 100 - newListPageWidth;
listPage.style.width = newListPageWidth + '%';
listPage.style.flex = `0 0 ${newListPageWidth}%`;
listPage.style.maxWidth = newListPageWidth + '%';
listDetail.style.width = newListDetailWidth + '%';
listDetail.style.flex = `0 0 ${newListDetailWidth}%`;
listDetail.style.maxWidth = newListDetailWidth + '%';
}
function stopDrag() {
document.documentElement.removeEventListener('mousemove', doDrag);
document.documentElement.removeEventListener('touchmove', doDrag);
document.documentElement.removeEventListener('mouseup', stopDrag);
document.documentElement.removeEventListener('touchend', stopDrag);
}
});
</script>
</body>
</html>
原生js实现拖拽改变宽度
最新推荐文章于 2024-02-22 16:06:16 发布