HTML5 拖放Drag和drop用法以及事件介绍




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
    #drop_zone {
        width: 300px;
        height: 300px;
        border: 2px dashed #aaa;
        margin: 20px;
        padding: 20px;
        text-align: center;
        font-size: 24px;
        color: #aaa;
    }
    #draggables img {
        width: 100px;
        cursor: move;
    }
</style>
</head>
<body>
 
<div id="drop_zone">Drop Here</div>
 
<div id="draggables">
    <img src="image1.jpg" alt="Image 1" draggable="true">
    <img src="image2.jpg" alt="Image 2" draggable="true">
    <img src="image3.jpg" alt="Image 3" draggable="true">
</div>
 
<script>
    // 获取可拖动元素和放置区域
    var draggables = document.querySelectorAll('#draggables img');
    var dropZone = document.getElementById('drop_zone');
 
    // 监听拖动开始
    draggables.forEach(function(img) {
        img.addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text/plain', img.src);
        });
    });
 
    // 监听拖动结束
    dropZone.addEventListener('dragover', function(event) {
        event.preventDefault(); // 阻止默认行为
        event.dataTransfer.dropEffect = 'copy'; // 设置可视效果
    });
 
    // 监听放置
    dropZone.addEventListener('drop', function(event) {
        event.preventDefault(); // 阻止默认行为
        var imageSrc = event.dataTransfer.getData('text/plain');
        this.innerHTML = '<img src="' + imageSrc + '" alt="Dropped Image">';
    });
</script>
 
</body>
</html>

这段代码演示了如何使用HTML5的拖放API。首先，我们设置了一个放置区域，并为可拖动的图片设置了draggable="true"属性。然后，我们使用dragstart事件来设置要传输的数据（在这个例子中是图片的源路径）。在放置区域上，我们监听dragover事件来更改默认行为并设置可视效果，监听drop事件来获取数据并更新放置区域的内容。这个例子简单直观地展示了如何在Web应用中实现拖放功能。

HTML5 拖放Drag和drop用法以及事件介绍

评论已关闭

推荐阅读