html draggable

作者：——愿望发布日期:2025-03-18 浏览:86

<!DOCTYPE html>
<html>
<head>
    <title>HTML Draggable Example</title>
    <style>
        #drag1 {
            width: 150px;
            height: 150px;
            background-color: #f44336;
            color: white;
            text-align: center;
            line-height: 150px;
            cursor: pointer;
        }
        #div1 {
            width: 350px;
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>

<h2>Drag and Drop Example</h2>

<p>Drag the red box into the gray area:</p>

<div id="drag1" draggable="true" ondragstart="drag(event)" id="drag1">Drag me!</div>
<br><br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

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

</body>
</html>

解释说明：

HTML结构：
- 创建了一个可拖动的红色方块 (<div id="drag1">) 和一个目标区域 (<div id="div1">)。
- draggable="true" 属性使得元素可以被拖动。
CSS样式：
- 定义了红色方块和目标区域的样式，包括宽度、高度、背景颜色等。
JavaScript功能：
- allowDrop 函数：阻止默认行为，允许元素在目标区域内放置。
- drag 函数：设置拖动数据，将被拖动元素的ID存储到数据传输对象中。
- drop 函数：处理放置事件，获取被拖动元素的ID并将其添加到目标区域内。

上一篇：html表格模板

下一篇：html下划线代码怎么写