html中拖放图像

最新推荐文章于 2022-07-07 23:41:24 发布

jihn_kevin

最新推荐文章于 2022-07-07 23:41:24 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jihn_kevin/article/details/105725761

本文详细介绍了如何在HTML中实现图像拖放功能。首先通过示例展示拖放效果，接着拆解分析，包括赋予对象拖放属性、处理dragstart、drag、dragover事件，以及如何使用dataTransfer获取和设置数据。在进阶部分讨论了如何在多个元素间进行拖放操作，并指出主要区别在于增加了一个放置目标的div元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例

代码：

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:198px; height:66px; padding:10px; border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        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>
</head>
<body>
    <p>请把W3School的图片拖放到矩形中：</p> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <br/>
    <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)">
    </img>
</body>
</html>

实现效果：
在这里插入图片描述

拆开分析

1.style
type,#div
2.ev
ev是新的对象类型
3.div
div是预先定义的对象，也就是方框。在之后拖拽图标的过程中，除了做准备的ondragstart函数，其余的ondrag和ondragover函数均设置在div中由它进行调用。

赋予对象可以被拖放的属性

draggable 属性设置为 true

代码块
<img draggable="true" />

当元素drap（ondragstart）开始时，会发生什么

调用函数drag(event)
ondragstart="drag(event)"
当拖动开始时会发生什么，这是在将元素设置为可拖动后，需要配套设置的属性
drag函数内容：
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}

放到何处,当drop结束（ondragover）时会发生什么

调用函数allowDrop(event)
ondragover="allowDrop(event)"
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
function allowDrop(ev){ev.preventDefault();}

放置的过程，drop的过程中（ondrop）会发生什么

调用函数drop(event)
ondrop="drop(event)"
drop函数内容：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

调用preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中。

script中主要做了三件事

允许一个元素放置到另一个元素中被放置的对象
调用函数来完成目标元素被drop前的准备放置的对象
调用函数来实现元素调用过程中的属性改变被放置的对象

进阶

在两个元素中，来回drop目标对象。
代码：

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1, #div2
            {float:left; width:198px; height:66px; margin:10px; padding:10px; border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        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>
</head>
<body>
    <p>请把W3School的图片拖放到矩形中：</p> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <br/>
    <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)">
    </img>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
</body>
</html>

主要区别

只增加了一个div对象，也就是新增了一个方框，函数内容和img的内容都没有改变。
也就是这个部分：

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>