[html5]HTML5 拖放（Drag 和 Drop）

HTML5 拖放API允许用户把文件或者数据项从一个元素拖放到另一个元素。这里提供一个简单的拖放实例，实现一个可拖动的图片。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
    #drop_area {
        width: 300px;
        height: 300px;
        border: 2px dashed #aaa;
        text-align: center;
        line-height: 300px;
        font-size: 24px;
        color: #ccc;
        position: relative;
    }
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        cursor: move;
    }
</style>
</head>
<body>
 
<div id="drop_area">
    <img id="drag_img" src="path_to_your_image.jpg" draggable="true" ondragstart="dragStart(event)">
</div>
 
<script>
    function dragStart(event) {
        var img = event.target;
        event.dataTransfer.setData('text/plain', null); // 设置数据传输的类型
        event.dataTransfer.setImageData(img.getContext('2d').getImageData(0, 0, img.width, img.height));
        event.dataTransfer.effectAllowed = 'move'; // 设置拖动效果
    }
 
    var dropArea = document.getElementById('drop_area');
    dropArea.ondragover = function(event) {
        event.preventDefault(); // 阻止默认行为
        event.dataTransfer.dropEffect = 'move'; // 设置拖放效果
    };
 
    dropArea.ondrop = function(event) {
        event.preventDefault();
        var img = document.getElementById('drag_img');
        img.style.left = event.clientX - img.offsetWidth / 2 + 'px';
        img.style.top = event.clientY - img.offsetHeight / 2 + 'px';
    };
</script>
 
</body>
</html>

在这个例子中，我们有一个可拖动的图片元素和一个放置区域。当图片被拖动时，dragStart 函数会被触发，设置数据传输的类型和图片内容。放置区域监听 ondragover 和 ondrop 事件，分别阻止默认行为并更新图片位置。这个例子演示了如何使用HTML5拖放API进行简单的元素拖动操作。

[html5]HTML5 拖放（Drag 和 Drop）

评论已关闭

推荐阅读