超酷HTML5的网页拖拽功能
|
freeflydom
2025年8月7日 17:6
本文热度 1116
|
作为一名前端萌新，今天终于搞懂了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
