<div 分割拖拽是一種常見的網頁設計技術，它使得網頁上的內容可以自由地被用戶分割和拖拽，以實現更好的交互和用戶體驗。通過使用 div 元素和相關的 CSS 和 JavaScript 代碼，開發者可以創建出具有分割和拖拽功能的網頁布局。下面將通過幾個代碼案例來詳細解釋和說明這種技術的實現方式。
案例 1:
<html>
<head>
<style>
.container {
display: flex;
height: 400px;
}
.panel {
flex: 1;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.handle {
width: 8px;
cursor: col-resize;
background-color: #ccc;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.container');
const handle = document.querySelector('.handle');
let isResizing = false;
let lastDownX = 0;
<br>
handle.addEventListener('mousedown', (e) => {
isResizing = true;
lastDownX = e.clientX;
});
<br>
window.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const containerWidth = container.offsetWidth;
const newSize = containerWidth - (lastDownX - e.clientX);
container.style.width = newSize + 'px';
});
<br>
window.addEventListener('mouseup', () => {
isResizing = false;
});
});
</script>
</head>
<body>
<div class="container">
<div class="panel">
Left Panel
</div>
<div class="handle"></div>
<div class="panel">
Right Panel
</div>
</div>
</body>
</html>在上述案例中，我們創建了一個包含左右兩個面板和一個分割條的容器。面板和分割條都使用 div 元素創建，并且分別賦予了 panel 和 handle 的 class 名稱。我們使用 flex 布局來實現面板和分割條的排列。通過 CSS 樣式我們設置了面板的樣式，并且給分割條添加了一個可拖拽的樣式。在 JavaScript 代碼中，我們監聽了瀏覽器的 mousedown、mousemove 和 mouseup 事件。當用戶按下鼠標左鍵時，啟動拖拽功能，當用戶移動鼠標時，根據鼠標的移動距離動態改變容器的寬度，當用戶松開鼠標時，停止拖拽。
案例 2:
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.left-panel {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.right-panel {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.handle {
position: absolute;
top: 0;
width: 10px;
height: 100%;
cursor: col-resize;
background-color: #ccc;
}
</style>
<script>
function initResize() {
const container = document.querySelector('.container');
const handle = document.querySelector('.handle');
let isResizing = false;
let lastDownX = 0;
<br>
handle.addEventListener('mousedown', (e) => {
isResizing = true;
lastDownX = e.clientX;
});
<br>
window.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const containerWidth = container.offsetWidth;
const newSize = containerWidth - (lastDownX - e.clientX);
const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');
leftPanel.style.width = newSize + 'px';
rightPanel.style.width = (containerWidth - newSize) + 'px';
});
<br>
window.addEventListener('mouseup', () => {
isResizing = false;
});
}
<br>
window.addEventListener('DOMContentLoaded', initResize);
</script>
</head>
<body>
<div class="container">
<div class="left-panel">
Left Panel
</div>
<div class="handle"></div>
<div class="right-panel">
Right Panel
</div>
</div>
</body>
</html>在上述案例中，我們同樣創建了一個包含左右兩個面板和一個分割條的容器。面板和分割條的樣式使用了絕對定位，并且通過設置寬度百分比的方式來實現容器的自適應。在 JavaScript 代碼中，我們使用了一個獨立的函數 initResize() 來初始化分割拖拽功能，使得代碼更加模塊化和易于維護。
通過以上兩個案例，我們可以看到，通過使用 div 元素、相關的 CSS 和 JavaScript 代碼，我們可以實現網頁的分割和拖拽功能，從而使得網頁的布局和交互更加靈活和自由。這種技術在實際應用中非常廣泛，比如在網頁編輯器、調整頁面布局等場景中都可以看到這種技術的應用。
上一篇css實現半圓動態邊框
下一篇css實現圖片左右滾動