HTML5 拖放（Drag Drop）_js allowdrop-CSDN博客

本文链接：https://blog.csdn.net/Wildpiglolo/article/details/123497337

这篇博客介绍了如何使用HTML5的拖放API来创建一个简单的图片拖放功能。通过设置`draggable`属性为`true`，`ondragstart`、`ondragover`和`ondrop`事件，可以实现在网页上拖放图片并将其放置到指定的矩形框中。示例代码包括HTML、CSS和JavaScript，展示了基本的拖放交互过程。

摘要由CSDN通过智能技术生成

将图片拖放到矩形框中，来回拖放

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5-拖放（Drag Drop）</title>
    <link rel="stylesheet" href="drag.css">
    <script type="text/javascript" src="drag.js"></script>
</head>

<body>
    <!-- 
        draggable-把元素设置为可拖放 
        ondragstart-规定当元素被拖动时发生的
        ondragover-规定被拖动的数据放置何处
        ondrop-规定放开数据时发生的事件
    -->
    <img id="drag1" src="../images/background1.jpg" alt="图片加载失败" width="60px" draggable="true"
        ondragstart="drag(event)">
    <div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</body>

</html>

CSS

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 3px solid #272020;
}

Javascript

// 设置拖放内容。dataTransfer.setData设置被拖动数据的类型和id值
function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}
// 拖到何处。阻止默认处理方式（数据/元素无法放置到其他元素中），使得元素能够放置其他元素中
function allowDrop(ev) {
    ev.preventDefault();
}
// 进行放置。阻止默认处理方式（以链接形式打开），获取setData()方法中设置的同类型的数据的值。将该元素追加到放置元素中
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

效果

在这里插入图片描述