记录---让网页像现实世界一样“拿起来，放进去”
?? 写在开头
点赞 + 收藏 === 学会???
引言
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
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
