為什么拖拽如此重要？
回想一下 iPad 為何能迅速風(fēng)靡全球？一個(gè)重要原因就是它的操作“傻瓜化”——你想移動(dòng)一個(gè)圖標(biāo)，就直接用手指把它拿起來，放到新位置。這種模擬現(xiàn)實(shí)行為的交互方式，讓人一學(xué)就會(huì)。
Google 的文件上傳、Trello 的任務(wù)卡片排序、網(wǎng)頁版的文件管理器……這些場(chǎng)景都在用 HTML5 拖拽，讓用戶操作更自然、更高效。
HTML5 拖拽的五大關(guān)鍵事件
要實(shí)現(xiàn)拖拽，你需要理解以下幾個(gè)核心事件：
?? 注意：dragover 和 drop 事件中必須調(diào)用 e.preventDefault()，否則瀏覽器會(huì)執(zhí)行默認(rèn)行為（如打開鏈接或圖片），導(dǎo)致拖拽失敗。
如何啟用拖拽？
1. 準(zhǔn)備
先準(zhǔn)備五個(gè)空盒子：
<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. 讓元素可拖
給要拖動(dòng)的元素加上 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;
}
開始拖拽時(shí)，給元素加個(gè)“抓起”效果（.hold 類）；
進(jìn)入目標(biāo)區(qū)域時(shí)，顯示虛線框提示（.hovered 類）；
放下時(shí)，把元素 append 到目標(biāo)容器中。
3. 別忘了響應(yīng)式：媒體查詢（Media Query）
拖拽在觸屏設(shè)備上同樣重要。使用 媒體查詢 可以讓頁面在手機(jī)、平板、電腦上都有良好體驗(yàn)：
/* 移動(dòng)優(yōu)先：小屏幕豎向排列 */
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
現(xiàn)代開發(fā)推崇 Mobile First（移動(dòng)優(yōu)先），因?yàn)槌^ 80% 的網(wǎng)頁訪問來自移動(dòng)設(shè)備。適配不同屏幕，是提升用戶體驗(yàn)的關(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ì)，根據(jù)屏幕寬度調(diào)整樣式 */
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="empty">
<!-- draggable="true"屬性用于啟用HTML5拖拽功能，沒有它元素將無法拖動(dòng) -->
<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 拖拽不只是一個(gè)技術(shù)功能，更是一種貼近人類直覺的交互設(shè)計(jì)。它讓網(wǎng)頁操作變得像整理桌面一樣簡(jiǎn)單：拿起來，放進(jìn)去。
掌握 draggable 屬性和五大事件，再結(jié)合響應(yīng)式設(shè)計(jì)，就能做出既美觀又易用的拖拽功能，讓網(wǎng)頁更具現(xiàn)代感和親和力。
參考文章：原文鏈接?
?
400 186 1886
