作為一名前端萌新，今天終于搞懂了HTML5的拖拽功能！原來那些像iPad一樣絲滑的拖拽交互，背后是這么實現的。我們先看看具體效果
下面是我的學習筆記，保證通俗易懂，一起看看吧~
一、HTML5拖拽為啥這么牛？
看看你手機里的APP就知道：拖拽排序、拖拽上傳、拖拽分享...這些操作完全符合人類直覺！HTML5把這種體驗帶到了網頁里，核心就靠draggable屬性和幾個神奇的事件：
<div class="fill" draggable="true"></div>
這個簡單的屬性就能激活瀏覽器的原生拖拽引擎，比用鼠標事件模擬流暢多了！難怪連Google都在用拖拽上傳文件呢。
二、拖拽的完整生命周期
想象一下拖拽的物理過程：
- 抓起物體 →
dragstart - 懸停在目標上方 →
dragenter + dragover - 移出目標區域 →
dragleave - 松手放下 →
drop - 全程結束 →
dragend
三、手把手實現圖片拖拽
直接上代碼！這里實現的是把圖片拖到空白容器中：
?? HTML結構
<body>
<div class="empty">
<div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</body>
?? CSS樣式（核心技巧）
* {
box-sizing: border-box;
}
body {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.empty {
background: white;
height: 150px;
width: 150px;
margin: 10px;
border: 3px solid #000;
}
.fill {
background-image: url('https://img1.baidu.com/it/u=400864332,910444934&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500');
width: 145px;
height: 145px;
cursor: pointer;
background-size: cover;
}
.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}
.hold {
border: 5px solid #ccc;
}
.invisible {
opacity: 0.4;
}
? JavaScript事件處理
const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.empty');
const body = document.body;
body.addEventListener('dragstart', dragStart);
body.addEventListener('dragend', dragEnd);
for (let empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', drag);
}
function dragStart(e) {
if (!e.target.classList.contains('fill')) {
e.preventDefault();
return;
}
fill.classList.add('hold');
setTimeout(() => {
fill.className = 'invisible';
}, 0);
}
function dragEnd(e) {
fill.className = 'fill';
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
e.target.classList.add('hovered');
}
function dragLeave(e) {
e.preventDefault();
e.target.classList.remove('hovered');
}
function drag(e) {
this.className = 'empty';
this.appendChild(fill);
}
四、必知的三個關鍵細節
阻止默認行為是必須的！
function dragStart(e) {
if (!e.target.classList.contains('fill')) {
e.preventDefault();
return;
}
fill.classList.add('hold');
setTimeout(() => {
fill.className = 'invisible';
}, 0);
}
瀏覽器默認不允許元素被"扔"到其他元素上。!e.target.classList.contains('fill')這一點很重要， 否則其他默認可拖拽的元素也會被拖拽，比如圖片
透明化的技巧
setTimeout(() => {
fill.className = 'invisible'
}, 0)
這個setTimeout妙在讓瀏覽器先渲染.hold樣式，再變透明，避免閃爍
classList的精準控制
用classList.add/remove代替直接操作className，避免覆蓋其他樣式
五、移動端適配黑科技：媒體查詢
同一個網頁在手機和電腦上顯示不同？全靠這個神器：
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
這就是響應式設計的核心！理解這個就能搞定多設備適配：
max-width: 800px → 小于800px寬度的設備生效（通常是手機）- 媒體查詢就像CSS的
if語句：如果屏幕滿足條件，就應用這些樣式
可以看到具體效果，當右上角的寬度小于800px就會改變彈性布局的方式 
六、總結：今日重點收獲
| 技術點 | 核心知識 | 代碼示例 |
|---|
| 拖拽初始化 | draggable="true"屬性 | <div draggable="true"> |
| 拖拽事件流 | dragstart → dragover → drop → dragend | 6個關鍵事件 |
| 視覺反饋 | .hold/.hovered樣式類 | 邊框變化+背景色變化 |
| 阻止默認行為 | e.preventDefault() | dragover和dragenter中必須調用 |
| 響應式布局 | @media媒體查詢 | 根據屏幕寬度調整布局 |
經驗之談：調試拖拽功能時，一定要在Chrome開發者工具中打開移動設備模式，測試手機上的觸屏操作是否正常！
轉自https://juejin.cn/post/7535390325939241001
該文章在 2025/8/7 17:06:15 編輯過
400 186 1886
