使用 HTML5 实现拖放交互：音效与提示功能的完整实现

2401_87192537

已于 2024-11-21 17:01:18 修改

阅读量383

点赞数 4

文章标签： html5 前端 html

于 2024-11-21 16:41:46 首次发布

本文链接：https://blog.csdn.net/2401_87192537/article/details/143948455

版权

前言

在前端开发中，拖放交互（Drag and Drop）是一个常见的场景，比如文件上传、列表排序和游戏操作等。为了更好地理解 HTML5 的拖放功能，我们设计了一个简单有趣的示例：将水果从水果区拖放到购物笼中，实时更新数量和价格，并在所有水果被成功放置后，播放音效并显示提示。

本文将详细讲解该功能的实现过程，包括页面布局、交互逻辑、音效播放和提示消息的控制。

功能概览

拖放交互：支持将水果从水果区拖放到购物笼。
动态更新：实时更新购物笼中水果的数量和总价格。
音效与提示：所有水果放入购物笼后播放音效并显示完成提示。

详细实现

1. 页面布局设计

HTML 页面分为水果区和购物笼两个主要部分，使用 flexbox 布局实现对齐，同时为交互增加了高亮边框和背景颜色效果。

<div class="container">
    <!-- 水果区 -->
    <div class="fruit" id="fruit" 
         ondragover="allowDrop(event)"
         ondragenter="dragEnter(event)"
         ondragleave="dragLeave(event)"
         ondrop="drop(event)">
        <h3>水果区</h3>
        <div class="fruit-list" id="fruit-list"></div>
    </div>

    <!-- 购物笼 -->
    <div class="basket" id="basket" 
         ondragover="allowDrop(event)"
         ondragenter="dragEnter(event)"
         ondragleave="dragLeave(event)"
         ondrop="drop(event)">
        <h3>购物笼</h3>
        <p class="placeholder">拖动水果到这里</p>
    </div>
</div>

<div class="total">
    已添加水果：<span id="count">0</span> 个，总价格：<span id="total-price">0.00</span> 元
</div>

<p class="celebration" id="celebration">🎉 恭喜你！所有水果都已添加到购物笼！ 🎉</p>

2. 初始化水果数据

使用一个数组存储水果的名称、价格和图片路径，并动态生成水果列表。

const fruitsData = [
    { id: 'apple', name: '苹果', price: 2, img: 'images/apple.jpg' },
    { id: 'banana', name: '香蕉', price: 3, img: 'images/banana.jpg' },
    { id: 'orange', name: '橙子', price: 1.5, img: 'images/orange.jpg' },
    { id: 'grape', name: '葡萄', price: 4, img: 'images/grape.jpg' },
    { id: 'pear', name: '梨', price: 2.5, img: 'images/pear.jpg' }
];

// 初始化水果区
function initFruits() {
    const fruitList = document.getElementById('fruit-list');
    fruitList.innerHTML = '';
    fruitsData.forEach(fruit => {
        const img = document.createElement('img');
        img.id = fruit.id;
        img.src = fruit.img;
        img.alt = fruit.name;
        img.draggable = true; // 设置为可拖动
        img.dataset.price = fruit.price; // 绑定价格数据
        img.ondragstart = drag; // 添加拖动事件
        fruitList.appendChild(img); // 添加到水果区
    });
}

3. 拖放交互功能

通过 HTML5 的 drag、drop 和 dragover 等事件，完成水果拖放交互。以下是主要事件逻辑：

允许放置

阻止默认行为，以确保可以放置水果。

function allowDrop(event) {
    event.preventDefault();
}

拖动开始

在水果被拖动时，记录其 id 以便后续处理。

function drag(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

放置水果

将水果从水果区拖动到购物笼，并更新购物笼内容。

function drop(event) {
            event.preventDefault();
            const data = event.dataTransfer.getData("Text");
            const fruit = document.getElementById(data);
            const target = event.target;

            if (target.classList.contains("fruit") || target.classList.contains("basket")) {
                const placeholder = target.querySelector(".placeholder");
                if (placeholder) {
                    placeholder.style.display = "none";
                }

                target.appendChild(fruit);
                updateBasket();

                // 播放成功音效
                const successSound = document.getElementById("success-sound");
                successSound.currentTime = 0; // 确保每次从头播放
                successSound.play().catch(error => {
                    console.error("音效播放失败：", error);
        });

4. 动态更新购物笼

在每次水果放置后，更新购物笼中的水果数量和总价格，并检查是否完成所有水果的放置。

function updateBasket() {
    const basket = document.getElementById("basket");
    const fruits = basket.querySelectorAll("img");
    let totalPrice = 0;

    // 计算总价格
    fruits.forEach(fruit => {
        totalPrice += parseFloat(fruit.dataset.price);
    });

    // 更新数量和总价格
    document.getElementById("count").textContent = fruits.length;
    document.getElementById("total-price").textContent = totalPrice.toFixed(2);

    // 检查是否所有水果都已放置完成
    if (fruits.length === fruitsData.length) {
        showCelebration(); // 显示完成提示
    } else {
        hideCelebration(); // 隐藏提示
    }
}

5. 提示与音效实现

在用户完成所有水果放置后，显示提示信息并播放音效。同时避免重复播放或显示。

显示提示

function showCelebration() {
    if (!celebrationPlayed) { // 避免重复播放
        const celebrationSound = document.getElementById("celebration-sound");
        celebrationSound.play().catch(console.error); // 播放音效
        document.getElementById("celebration").classList.add("show"); // 显示提示
        celebrationPlayed = true; // 标记音效已播放
    }
}

隐藏提示

在重新拖放水果时，重置提示状态。

function hideCelebration() {
    const celebrationElement = document.getElementById("celebration");
    celebrationElement.classList.remove("show"); // 隐藏提示
    celebrationPlayed = false; // 重置音效状态
}