HTML5 拖放

最新推荐文章于 2024-04-20 11:06:33 发布

文丑颜不良啊

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量645

点赞数 1

分类专栏： HTML 与 CSS 文章标签： html5 html html5 新元素之拖放

本文链接：https://blog.csdn.net/jiaomubai/article/details/127223139

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

拖放（Drag 和 drop）是 HTML5 标准的组成部分。同时拖放也是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都可以通过设置相关属性来实现拖放效果。

如：

<!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 拖放</title>

    <!-- div1 的样式 -->
    <style type="text/css">
        #div1 {
            width: 500px;
            height: 310px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>

    <!-- JavaScript 实现拖放相关函数 -->
    <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>

</head>

<body>

    <p>拖动图片到矩形框中:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img loading="lazy" id="drag1" src="../resource/picture/Chinese.jpg" draggable="true" ondragstart="drag(event)"
        width="500" height="310">

</body>

</html>

拖放前：

拖放后：

可以看到已经实现了拖放的效果。

实现拖放的过程及步骤（代码解释）：

首先，需要将元素设置为可拖动。如上所示，应为我们需要拖动的是图片，所以在图片的标签 <img> 中通过设置 draggable 属性的值为 true 来使得该图片可以进行缩放。

<img draggable="true>

然后需要知道拖动什么。如上所示，我们需要拖动的是图片，但具体是图片的什么呢？是图片的一部分，还是图片的整体？我们在图片 <img> 中通过设置 ondragstart 属性来确定我们需要拖动的东西。如上所示，我们设置 ondragstart 指向了一个 drag() 的函数，该函数中通过 dataTransfer.setData("Text", ev.target.id) 方法来设置被拖动数据的数据类型和值。如上所示，我们设置被拖动数据的数据类型为"Text"。Text 是一个 DOMString，表示要添加到 drag object 的拖动数据的类型。设置被拖动数据的值为可拖动元素的 id（即"drag1"，即图片元素）。

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

之后设置拖放到的位置，即明白将元素拖放到何处。该过程通过 ondragover 属性来实现，该属性表示在何处放置被拖动的数据。默认是无法将被拖动的数据或元素放置到其他元素中的，如果需要设置允许放置，我们必须阻止对元素的默认处理方式，即通过调用 ondragover 事件的 event.preventDefault() 方法。通常来说，需要将被拖放元素放置在哪个元素中，就在哪个元素中设置 ondragover 属性。如上所示，我们需要将图片元素拖放到 id 为"div1"的容器中，所以我们在 div 中为 ondragover 属性赋值。我们给该属性赋值指向一个 allowDrop() 函数，在该函数中阻止对元素的默认处理方式。

function allowDrop(ev) {
    ev.preventDefault();
}

之后进行放置。通过 drop 属性来完成这一动作。因为我们需要在 div 容器中进行放置，所以就在 div 中为 drop 属性赋值。如上所示，我们给该属性赋值指向一个 drop() 函数，在该函数中首先调用 preventDefault() 方法来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开），之后通过 dataTransfer.getData("Text") 方法获得被拖的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据，然后把被拖元素追加到放置元素（目标元素）中。

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

以上示例只是展示了拖放的基本操作，即将一个元素拖放到另一个元素中，但是无法来回拖放。下面的示例我们看一下如何在两个 div 容器之间来回拖放元素。


<!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 拖放</title>

    <style type="text/css">
        #div1,
        #div2 {
            float: left;
            width: 500px;
            height: 310px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <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>

</head>

<body>

    <h4>在两个容器之间来回拖放元素：</h4>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="../resource/picture/Chinese.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="500"
            height="310">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

拖放前：