HTML5-拖拽事件

作者：System 时间：2024年08月11日分类：所有,html5 字数：1234

HTML5 提供了一组拖拽事件，使得元素可以被拖动。这里是一个简单的示例，展示了如何使用这些事件来创建一个可拖动的元素：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件示例</title>
<style>
    #draggable {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        cursor: pointer;
    }
</style>
</head>
<body>
 
<div id="draggable">拖动我</div>
 
<script>
    const draggable = document.getElementById('draggable');
 
    draggable.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', null); // 设置数据传输的类型
    });
 
    draggable.addEventListener('dragend', function(event) {
        // 拖动结束时的操作
    });
 
    document.addEventListener('dragover', function(event) {
        event.preventDefault(); // 阻止默认行为，允许放置
    });
 
    document.addEventListener('drop', function(event) {
        event.preventDefault(); // 阻止默认行为，允许放置
        const x = event.clientX;
        const y = event.clientY;
        draggable.style.left = `${x}px`;
        draggable.style.top = `${y}px`;
    });
</script>
 
</body>
</html>

在这个例子中，我们创建了一个可拖动的红色方块。通过设置 draggable 元素的 dragstart 和 dragend 事件监听器，我们可以在拖动开始和结束时执行一些操作。同时，我们还需要阻止默认的拖动行为，并在放置（drop）事件中处理元素位置的更新。

HTML5-拖拽事件

评论已关闭

推荐阅读