記錄---讓網(wǎng)頁像現(xiàn)實世界一樣“拿起來，放進(jìn)去”
????? 寫在開頭
點贊 + 收藏 === 學(xué)會??????
引言
2025年，我們早已習(xí)慣用手指滑動屏幕、拖動文件。而這一切流暢體驗的背后，HTML5 的 拖拽（Drag and Drop） 功能功不可沒。它讓網(wǎng)頁不再只是“點一點”，而是可以“拖一拖、放一放”，大大提升了交互的直觀性和用戶體驗。
為什么拖拽如此重要？
回想一下 iPad 為何能迅速風(fēng)靡全球？一個重要原因就是它的操作“傻瓜化”——你想移動一個圖標(biāo)，就直接用手指把它拿起來，放到新位置。這種模擬現(xiàn)實行為的交互方式，讓人一學(xué)就會。
Google 的文件上傳、Trello 的任務(wù)卡片排序、網(wǎng)頁版的文件管理器……這些場景都在用 HTML5 拖拽，讓用戶操作更自然、更高效。
HTML5 拖拽的五大關(guān)鍵事件
要實現(xiàn)拖拽，你需要理解以下幾個核心事件：
?? 注意：
dragover和drop事件中必須調(diào)用e.preventDefault()，否則瀏覽器會執(zhí)行默認(rèn)行為（如打開鏈接或圖片），導(dǎo)致拖拽失敗。
如何啟用拖拽？
1. 準(zhǔn)備
先準(zhǔn)備五個空盒子：
<div class="empty"><div class="fill"></div></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div>
2. 讓元素可拖
給要拖動的元素加上 draggable="true" 屬性：
<div class="fill" draggable="true"></div>
監(jiān)聽事件
用 JavaScript 綁定上述事件，控制樣式和邏輯。比如：
.hold {
border: solid 5px #ccc;
}
.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}
- 開始拖拽時，給元素加個“抓起”效果（
.hold類）； - 進(jìn)入目標(biāo)區(qū)域時，顯示虛線框提示（
.hovered類）； - 放下時，把元素
append到目標(biāo)容器中。
3. 別忘了響應(yīng)式：媒體查詢（Media Query）
拖拽在觸屏設(shè)備上同樣重要。使用 媒體查詢 可以讓頁面在手機(jī)、平板、電腦上都有良好體驗：
/* 移動優(yōu)先：小屏幕豎向排列 */
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
現(xiàn)代開發(fā)推崇 Mobile First（移動優(yōu)先），因為超過 80% 的網(wǎng)頁訪問來自移動設(shè)備。適配不同屏幕，是提升用戶體驗的關(guān)鍵。
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag N Drop</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.empty {
height: 150px;
width: 150px;
margin: 10px;
border: solid 3px black;
background: white;
}
.fill {
background-image: url('https://img1.baidu.com/it/u=400864332,910444934&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500');
background-size: cover;
height: 145px;
width: 145px;
cursor: pointer;
}
.hold {
border: solid 5px #ccc;
}
.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}
/* 媒體查詢（Media Query）選擇器，用于響應(yīng)式設(shè)計，根據(jù)屏幕寬度調(diào)整樣式 */
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="empty">
<!-- draggable="true"屬性用于啟用HTML5拖拽功能，沒有它元素將無法拖動 -->
<div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<script>
const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')
fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd)
for(const empty of empties) {
// 拖拽在目標(biāo)元素上方
empty.addEventListener('dragover', dragOver)
// 拖拽進(jìn)入目標(biāo)元素
empty.addEventListener('dragenter', dragEnter)
// 拖拽離開目標(biāo)元素
empty.addEventListener('dragleave', dragLeave)
// 拖拽掉入目標(biāo)元素
empty.addEventListener('drop', dragDrop)
}
function dragStart(e) {
if(!e.target.classList.contains("fill")) {
e.preventDefault()
return
}
fill.className += ' hold' //注意一定要加空格!!!
setTimeout(() => fill.className = 'invisible', 0)
}
function dragEnd() {
fill.className = 'fill'
}
function dragOver(e) {
e.preventDefault()
}
function dragEnter(e) {
e.preventDefault()
this.className += ' hovered'
}
function dragLeave() {
this.className = 'empty'
}
function dragDrop() {
this.className = 'empty'
this.append(fill)
}
</script>
</body>
</html>
小結(jié)
HTML5 拖拽不只是一個技術(shù)功能，更是一種貼近人類直覺的交互設(shè)計。它讓網(wǎng)頁操作變得像整理桌面一樣簡單：拿起來，放進(jìn)去。
掌握 draggable 屬性和五大事件，再結(jié)合響應(yīng)式設(shè)計，就能做出既美觀又易用的拖拽功能，讓網(wǎng)頁更具現(xiàn)代感和親和力。
本文轉(zhuǎn)載于：https://juejin.cn/post/7535735818608295963
如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
浙公網(wǎng)安備 33010602011771號