记录-让网页像现实世界一样“拿起来，放进去”

大懒精 發表於 2025-9-8 17:49:00

记录---让网页像现实世界一样“拿起来，放进去”

<h1 data-id="heading-0">🧑‍💻 写在开头</h1>
<p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<p> </p>
<h2 data-id="heading-0">引言</h2>
<blockquote>
<p>2025年，我们早已习惯用手指滑动屏幕、拖动文件。而这一切流畅体验的背后，HTML5 的 拖拽（Drag and Drop） 功能功不可没。它让网页不再只是“点一点”，而是可以“拖一拖、放一放”，大大提升了交互的直观性和用户体验。</p>
</blockquote>
<h3 data-id="heading-1">为什么拖拽如此重要？</h3>
<blockquote>
<p>回想一下 iPad 为何能迅速风靡全球？一个重要原因就是它的操作“傻瓜化”——你想移动一个图标，就直接用手指把它拿起来，放到新位置。这种模拟现实行为的交互方式，让人一学就会。</p>
<p>Google 的文件上传、Trello 的任务卡片排序、网页版的文件管理器……这些场景都在用 HTML5 拖拽，让用户操作更自然、更高效。</p>
</blockquote>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250908174657428-1005775919.png" alt="企业微信截图_20250908174544" loading="lazy"></p>
<p> </p>
<h2 data-id="heading-2">HTML5 拖拽的五大关键事件</h2>
<p>要实现拖拽，你需要理解以下几个核心事件：</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250908174706285-1168335837.png" alt="企业微信截图_20250908174550" loading="lazy"></p>
<p> </p>
<blockquote>
<p>⚠️ 注意：<code>dragover</code> 和 <code>drop</code> 事件中必须调用 <code>e.preventDefault()</code>，否则浏览器会执行默认行为（如打开链接或图片），导致拖拽失败。</p>
</blockquote>
<h2 data-id="heading-3">如何启用拖拽？</h2>
<h4 data-id="heading-4">1. 准备</h4>
<p>先准备五个空盒子：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="empty"><div class="fill"></div></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div></pre>
</div>
<h4 data-id="heading-5">2. 让元素可拖</h4>
<p>给要拖动的元素加上 <code>draggable="true"</code> 属性：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="fill" draggable="true"></div></pre>
</div>
<h5 data-id="heading-6">监听事件</h5>
<p>用 JavaScript 绑定上述事件，控制样式和逻辑。比如：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.hold {
border: solid 5px #ccc;
}

.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}</pre>
</div>
<ul>
<li>开始拖拽时，给元素加个“抓起”效果（<code>.hold</code> 类）；</li>
<li>进入目标区域时，显示虚线框提示（<code>.hovered</code> 类）；</li>
<li>放下时，把元素 <code>append</code> 到目标容器中。</li>
</ul>
<h4 data-id="heading-7">3. 别忘了响应式：媒体查询（Media Query）</h4>
<p>拖拽在触屏设备上同样重要。使用 媒体查询 可以让页面在手机、平板、电脑上都有良好体验：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/* 移动优先：小屏幕竖向排列 */
@media (max-width: 800px) {
body {
   flex-direction: column;
}
}</pre>
</div>
<p>现代开发推崇 Mobile First（移动优先），因为超过 80% 的网页访问来自移动设备。适配不同屏幕，是提升用户体验的关键。</p>
<h2 data-id="heading-8">完整代码</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!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">
   
   <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></pre>
</div>
<h2 data-id="heading-9">小结</h2>
<p>HTML5 拖拽不只是一个技术功能，更是一种贴近人类直觉的交互设计。它让网页操作变得像整理桌面一样简单：拿起来，放进去。</p>
<p>掌握 <code>draggable</code> 属性和五大事件，再结合响应式设计，就能做出既美观又易用的拖拽功能，让网页更具现代感和亲和力。</p>
<div>
<h2>本文转载于：https://juejin.cn/post/7535735818608295963</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19080353

頁: [1]

琼殿技术论坛's Archiver

记录---让网页像现实世界一样“拿起来，放进去”