【Html5拖放详解】

HTML5拖放API允许用户通过拖放操作来移动数据，使页面元素能够被拖动。以下是如何使用HTML5拖放API的基本示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<style>
    #draggable {
        width: 150px;
        height: 150px;
        background: skyblue;
        color: white;
        text-align: center;
        line-height: 150px;
        border: 2px dashed #333;
        cursor: move;
    }
    #dropzone {
        width: 300px;
        height: 150px;
        background: orange;
        color: white;
        text-align: center;
        line-height: 150px;
        margin-top: 10px;
        border: 2px dashed #333;
    }
</style>
</head>
<body>
 
<div id="draggable" draggable="true">拖动我</div>
<div id="dropzone">放置区域</div>
 
<script>
// 获取拖动的元素和放置的区域
var dragItem = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');
 
// 拖动开始时的事件监听
dragItem.addEventListener('dragstart', function(event) {
    // 设置要传递的数据
    event.dataTransfer.setData('text/plain', event.target.id);
});
 
// 拖动结束时的事件监听
dropZone.addEventListener('dragover', function(event) {
    // 阻止默认行为以允许放置
    event.preventDefault();
});
 
// 放置时的事件监听
dropZone.addEventListener('drop', function(event) {
    // 阻止默认行为
    event.preventDefault();
    // 获取被拖动元素的id
    var data = event.dataTransfer.getData('text/plain');
    // 将被拖动元素添加到放置区域
    dropZone.appendChild(document.getElementById(data));
});
</script>
 
</body>
</html>

在这个示例中，我们创建了一个可拖动的<div>和一个可放置的区域。通过设置draggable="true"来使元素可拖动，并使用addEventListener来监听拖动相关的事件。dragstart事件用于设置要传递的数据，dragover事件用于阻止默认行为以允许放置，drop事件用于获取数据并执行放置操作。

【Html5拖放详解】

评论已关闭

推荐阅读