HTML5 拖放

十分钟空间

发布于 2022-08-17 14:29:11

1.5K0

发布于 2022-08-17 14:29:11

文章被收录于专栏：Springboot框架学习

一、什么是拖放（Drag 和 drop）？

拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。

拖放是HTML5 标准中的一部分，任何标签元素都能够被拖放。

二、为什么需要拖放？

在WEB应用开发中，可能需要针对页面中的某个对象：图片、文字、容器等，进行位置的移动来实现自定义的布局
常见的拖放应用一：电商平台中的商家店铺装修，这个时候电商平台会提供多个可以拖动的模块，商家可以根据自己设计的页面布局将这些模块进行拖动布局
常见的拖放应用二：后台管理系统中模块的摆放，在复杂的后台管理系统中，往往有的页面中会展示很多的数据展示模块：会员统计、订单统计、员工统计、待办事项、常用操作等等，这些模块的摆放一般有一个初始默认位置，各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放
在HTML5 之前，我们要想实现针对页面中的标签元素的移动和拖放，没有一个统一的操作标准，一般都是监听鼠标点击事件、鼠标移动事件然后配合 DOM对标签元素的操作来实现

三、HTML5 拖放（Drag 和 drop）的浏览器兼容

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持拖动。注：Safari 5.1.2不支持拖动

HTML5 拖放实例

一、实现标签元素的拖放步骤

由于要实现对某个元素的拖放功能，需要事先进行多个参数的设置，所以这里存在了步骤的概念，我们按照如下步骤进行即可，不必去了解为什么这样，因为就是这样设计的：

1、设置元素为可拖放

为了使某个元素可拖动，我们给他添加 draggable 属性，并且把 draggable 属性设置为 true ：

<img draggable="true" />

2、设置要拖动的内容（ondragstart 和 setData()）

设置当元素被拖动时，要拖动的内容是什么；这里需要给要拖动的元素添加 ondragstart事件（当元素开始用鼠标拖动时，会执行这里设置的函数），然后我们需要在事件的回调中设置拖动的内容，如下代码：

<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)"  />
function drag(ev) {
   //设置被拖数据的数据类型和值
   ev.dataTransfer.setData("img",ev.target.id); //数据类型可以是任意字符 "img"，值是可拖动元素的 id ("drag1")
}

3、设置拖动元素可以放置的位置（ondragover）

默认情况下，我们无法将数据/元素放置到其他元素中。如下代码我们如果要将图片放置到另一个div容器中，需要设置这个div容器可以放置其他元素（给他添加ondragover 事件，ondragover 规定当我们拖动的元素经过它的时候，可以将拖动的元素放置到此处）：

<div id="div1" ondragover="allowDrop(event)"></div>
function allowDrop(ev) {
  ev.preventDefault(); //必须阻止对元素的默认处理方式，表示设置允许放置，默认行为是以链接形式打开
}

4、设置拖动元素的新位置（ondrop）

当我们松开鼠标后，表示我们要放置被拖动的数据，这时会发生 drop 事件，我们要规定被拖动的元素需要放置的新位置，这里给div容器添加 ondrop 事件，如下代码：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("img");
  ev.target.appendChild(document.getElementById(data));
}

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

二、拖动一个图片到一个div容器中

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 { width:300px; height:120px;padding:10px; border:1px solid blue; font-size:12px; text-align: center; }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("img",ev.target.id);
        }
        function drop(ev)  {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("img");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">我是一个容器，请用鼠标拖动下面的图片移动到我上面</div>
<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" height="100px"  />

</body>
</html>

三、在两个 <div> 元素之间拖动图像

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1, #div2 {float:left; width:198px; height:100px; margin:10px;padding:10px;border:1px solid blue;  text-align: center;}
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("img",ev.target.id);
        }
        function drop(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("img");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" height="100px" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/05/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html5