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

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

引言

2025年，我们早已习惯用手指滑动屏幕、拖动文件。而这一切流畅体验的背后，HTML5 的拖拽（Drag and Drop）功能功不可没。它让网页不再只是“点一点”，而是可以“拖一拖、放一放”，大大提升了交互的直观性和用户体验。

为什么拖拽如此重要？

回想一下 iPad 为何能迅速风靡全球？一个重要原因就是它的操作“傻瓜化”——你想移动一个图标，就直接用手指把它拿起来，放到新位置。这种模拟现实行为的交互方式，让人一学就会。

Google 的文件上传、Trello 的任务卡片排序、网页版的文件管理器……这些场景都在用 HTML5 拖拽，让用户操作更自然、更高效。

企业微信截图_20250908174544

HTML5 拖拽的五大关键事件

要实现拖拽，你需要理解以下几个核心事件：

企业微信截图_20250908174550

⚠️ 注意：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

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

posted @ 2025-09-08 17:49 林恒阅读(159) 评论(0) 收藏举报

刷新页面返回顶部

林恒