创建HTML5中可拖动的段落|极客教程

创建HTML5中可拖动的段落

参考： Create a draggable paragraph in HTML5

在现代网页设计中，可拖动元素为用户提供了更加互动和直观的体验。HTML5引入了一系列的拖放（Drag and Drop）API，使得在网页上实现元素的拖放变得简单。本文将详细介绍如何在HTML5中创建一个可拖动的段落，并提供多个示例代码，帮助读者更好地理解和掌握这一技术。

基础知识

在HTML5中，任何元素都可以被设置为可拖动。要实现拖放功能，主要涉及以下几个属性和事件：

draggable属性：设置元素是否可拖动。
dragstart事件：当用户开始拖动元素时触发。
dragover事件：当被拖动的元素在另一个元素上方移动时触发。
drop事件：当被拖动的元素被放置到目标位置时触发。

示例代码

示例1：基本的可拖动段落

<!DOCTYPE html>
<html>
<head>
    <title>可拖动的段落</title>
    <style>
        #draggable {
            width: 200px;
            height: 100px;
            background-color: lightgrey;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<p id="draggable" draggable="true">拖动我到how2html.com</p>

<script>
document.getElementById("draggable").addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text", event.target.id);
});
</script>

</body>
</html>

Output:

创建HTML5中可拖动的段落

示例2：自定义拖动效果

<!DOCTYPE html>
<html>
<head>
    <title>自定义拖动效果</title>
    <style>
        #draggable {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<p id="draggable" draggable="true">拖动我查看效果 - how2html.com</p>

<script>
document.getElementById("draggable").addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text/plain", "This text may be dragged");
    event.dataTransfer.effectAllowed = "move";
});
</script>

</body>
</html>

Output:

创建HTML5中可拖动的段落

示例3：设置拖动目标区域

<!DOCTYPE html>
<html>
<head>
    <title>设置拖动目标区域</title>
    <style>
        #draggable {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
        }
        #dropzone {
            width: 400px;
            height: 200px;
            background-color: lightyellow;
            text-align: center;
            line-height: 200px;
            border: 2px dashed black;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<p id="draggable" draggable="true">拖动我到下方区域 - how2html.com</p>
<div id="dropzone">拖动目标区域</div>

<script>
document.getElementById("draggable").addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text", event.target.id);
});

document.getElementById("dropzone").addEventListener("dragover", function(event) {
    event.preventDefault();
});

document.getElementById("dropzone").addEventListener("drop", function(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
});
</script>

</body>
</html>

Output:

创建HTML5中可拖动的段落

示例4：拖动多个元素

<!DOCTYPE html>
<html>
<head>
    <title>拖动多个元素</title>
    <style>
        .draggable {
            width: 150px;
            height: 50px;
            background-color: lightcoral;
            text-align: center;
            line-height: 50px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
        #dropzone {
            width: 400px;
            height: 300px;
            background-color: lightblue;
            text-align: center;
            line-height: 300px;
            border: 2px dashed black;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<p class="draggable" draggable="true">元素1 - how2html.com</p>
<p class="draggable" draggable="true">元素2 - how2html.com</p>
<div id="dropzone">拖动目标区域</div>

<script>
var draggables = document.querySelectorAll('.draggable');

draggables.forEach(function(draggable) {
    draggable.addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("text", event.target.id);
    });
});

document.getElementById("dropzone").addEventListener("dragover", function(event) {
    event.preventDefault();
});

document.getElementById("dropzone").addEventListener("drop", function(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
});
</script>

</body>
</html>

Output:

创建HTML5中可拖动的段落

示例5：使用HTML5 Canvas实现拖动

<!DOCTYPE html>
<html>
<head>
    <title>使用HTML5 Canvas实现拖动</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<canvas id="canvas" width="400" height="300"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rect = {x: 50, y: 50, width: 100, height: 50};
ctx.fillStyle = "lightgreen";
ctx.fillRect(rect.x, rect.y, rect.width, rect.height);

canvas.addEventListener("dragstart", function(event) {
    var mouseX = event.clientX - canvas.offsetLeft;
    var mouseY = event.clientY - canvas.offsetTop;
    if (mouseX > rect.x && mouseX < rect.x + rect.width && mouseY > rect.y && mouseY < rect.y + rect.height) {
        event.dataTransfer.setData("text/plain", "Dragging the rectangle");
    }
});
</script>

</body>
</html>

Output:

创建HTML5中可拖动的段落