🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
引言
2025年，我们早已习惯用手指滑动屏幕、拖动文件。而这一切流畅体验的背后，HTML5 的 拖拽（Drag and Drop） 功能功不可没。它让网页不再只是“点一点”，而是可以“拖一拖、放一放”，大大提升了交互的直观性和用户体验。
为什么拖拽如此重要？
回想一下 iPad 为何能迅速风靡全球？一个重要原因就是它的操作“傻瓜化”——你想移动一个图标，就直接用手指把它拿起来，放到新位置。这种模拟现实行为的交互方式，让人一学就会。
Google 的文件上传、Trello 的任务卡片排序、网页版的文件管理器……这些场景都在用 HTML5 拖拽，让用户操作更自然、更高效。
HTML5 拖拽的五大关键事件
要实现拖拽，你需要理解以下几个核心事件：
⚠️ 注意：
dragover和drop事件中必须调用e.preventDefault()，否则浏览器会执行默认行为（如打开链接或图片），导致拖拽失败。
如何启用拖拽？
1. 准备
先准备五个空盒子：
<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>
监听事件
用 JavaScript 绑定上述事件，控制样式和逻辑。比如：
.hold {border: solid 5px #ccc;
}.hovered {background-color: #333;border-color: white;border-style: dashed;
}
- 开始拖拽时，给元素加个“抓起”效果（
.hold类）； - 进入目标区域时，显示虚线框提示（
.hovered类）； - 放下时，把元素
append到目标容器中。
3. 别忘了响应式：媒体查询（Media Query）
拖拽在触屏设备上同样重要。使用 媒体查询 可以让页面在手机、平板、电脑上都有良好体验：
/* 移动优先：小屏幕竖向排列 */
@media (max-width: 800px) {body {flex-direction: column;}
}
现代开发推崇 Mobile First（移动优先），因为超过 80% 的网页访问来自移动设备。适配不同屏幕，是提升用户体验的关键。
完整代码
<!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）选择器，用于响应式设计，根据屏幕宽度调整样式 */@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) {// 拖拽在目标元素上方empty.addEventListener('dragover', dragOver)// 拖拽进入目标元素empty.addEventListener('dragenter', dragEnter)// 拖拽离开目标元素empty.addEventListener('dragleave', dragLeave)// 拖拽掉入目标元素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>
小结
HTML5 拖拽不只是一个技术功能，更是一种贴近人类直觉的交互设计。它让网页操作变得像整理桌面一样简单：拿起来，放进去。
掌握 draggable 属性和五大事件，再结合响应式设计，就能做出既美观又易用的拖拽功能，让网页更具现代感和亲和力。
本文转载于：https://juejin.cn/post/7535735818608295963
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
