🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

引言

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>