其他分享
首页 > 其他分享> > 13HTML5 拖放

13HTML5 拖放

作者：互联网

文章目录

1、拖放概述

拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。
注：img元素和 a 元素（必须指定 href）默认允许拖放。

2、浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。

3、拖放使用

拖放的实现会涉及到 JavaScript 。
先看一个例子。

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>Title</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) {
            //调用 preventDefault() 来避免浏览器对数据的默认处理
            ev.preventDefault();
            //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
            var data = ev.dataTransfer.getData('Text');
            //被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
            // 想要了解更多拖放的知识，请访问：MDN HTML 拖放 API
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
    <p>请把图片拖放到矩形中：</p>
    <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
    <br />
    <img
            id="drag1"
            src="imgs/drag-image.png"
            draggable="true"
            οndragstart="drag(event)"
    />
</body>
</html>

在这里插入图片描述
下面将一一介绍拖放是如何实现的。

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

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

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

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

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

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

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

进行放置
当放置被拖数据时，会发生 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));
}

想要了解更多拖放的知识，请访问：MDN HTML 拖放 API

标签：preventDefault,dataTransfer,Text,元素,13HTML5,ev,拖放
来源： https://blog.csdn.net/weixin_47197906/article/details/119581664