HTML5 拖放（Drag Drop）

最新推荐文章于 2024-05-15 20:43:52 发布

Abbylolo

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量891

点赞数

分类专栏： Web前端文章标签： html5 javascript html

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

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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));
}

效果

在这里插入图片描述

Abbylolo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖放（Drag Drop）

将图片拖放到矩形框中，来回拖放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"&gt
复制链接

扫一扫