【笔记】html5入门（第三篇）

最新推荐文章于 2024-05-29 18:31:06 发布

执笔思华年

最新推荐文章于 2024-05-29 18:31:06 发布

阅读量108

点赞数

分类专栏： html5 实习记录

本文链接：https://blog.csdn.net/abcdefggggghk/article/details/99653717

版权

实习记录同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

HTML5 拖放

知识点

概述

HTML5 拖放使用

笔记参考摘录自：MDN HTML 拖放 API

还不是很理解QAQ。。记得复习！

概述

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。

在 MDN 官方文档中拖放是这样描述的：

HTML 拖放接口使应用程序能够在 Firefox 和其他浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。

对于网站、扩展以及 XUL 应用程序来说，你可以自定义能够成为可拖拽的元素类型、可拖拽元素产生的反馈类型，以及可放置的元素。

注：img 元素和 a 元素（必须指定 href）默认允许拖放。

HTML5 拖放使用

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>my page</title>

        <style type="text/css">
            #div1{
                width: 200px;
                height: 100px;
                padding: 10px;
                border: 1px solid red;
            }
        </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>请把图片放在矩形中：</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br />
        <img id="drag1" src="drag-imge.jpg" draggable="true" ondragstart="drag(event)">
    </body>

</html>

运行结果：

拖放实现过程：

1、确定什么是可拖动的

为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：

<img draggable="true" ondragstart="drag(event)" />

2、定义拖动数据

应用程序可以在拖动操作中包含任意数量的数据项。每个数据项都是一个 string 类型，典型的MIME类型，如：text/html。

每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性（ DataTransfer 对象）也有管理拖动数据的方法，setData() 方法添加一个项目的拖拽数据，如下面的示例代码所示：

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

在这个例子中数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

3、定义一个放置区

ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,如下所示：

function allowDrop(ev) {
    //调用 preventDefault() 来避免浏览器对数据的默认处理
    ev.preventDefault();
}

4、进行放置

当放置被拖数据时，会发生 drop 事件。如下所示：

function drop(ev) {
    //调用 preventDefault() 来避免浏览器对数据的默认处理
    ev.preventDefault();
    //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    var data = ev.dataTransfer.getData("Text");
    //被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
    ev.target.appendChild(document.getElementById(data));
}