HTML5-简单拖放操作

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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5拖放操作示例</title>
    <style>
        #draggable {
            width: 200px;
            height: 200px;
            background: skyblue;
            color: white;
            text-align: center;
            line-height: 200px;
            border: 2px dashed #333;
            cursor: move;
        }
        #droppable {
            width: 400px;
            height: 400px;
            background: orange;
            position: absolute;
            left: 400px;
            top: 20px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div id="draggable" draggable="true">拖动我</div>
    <div id="droppable">放置区域</div>
 
    <script>
        const dragItem = document.getElementById('draggable');
        const dropArea = document.getElementById('droppable');
 
        dragItem.addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text/plain', event.target.id);
        });
 
        dropArea.addEventListener('dragover', function(event) {
            event.preventDefault(); // 阻止默认行为
            event.dataTransfer.dropEffect = 'move'; // 设置拖放操作的视觉效果
        });
 
        dropArea.addEventListener('drop', function(event) {
            event.preventDefault();
            const id = event.dataTransfer.getData('text');
            const draggedElement = document.getElementById(id);
            dropArea.appendChild(draggedElement);
        });
    </script>
</body>
</html>

这段代码实现了一个简单的拖放操作。用户可以点击#draggable元素并将其拖动到#droppable元素内部，完成放置操作。代码中使用了dragstart、dragover和drop事件，并通过event.dataTransfer对象来管理拖放的数据。

HTML5-简单拖放操作

评论已关闭

推荐阅读