HTML5 拖放（附带源码及动画演示）

懒羊羊大王呀

于 2024-08-08 23:38:27 发布

阅读量1k

点赞数 27

分类专栏： html5 前端文章标签： html5 前端 html 笔记

本文链接：https://blog.csdn.net/m0_73777400/article/details/141038556

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

HTML5 拖放效果

概述

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

实例

如下是实现从左侧容器中拖拽图片到右侧的容器：

实现方法：

<!-- 以下代码实现图片可以从第一个容器拖放到第二个容器 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>拖放效果</title>
<style type="text/css">
#div1, #div2 {
	float:left; 
	width:100px; 
	height:35px; 
	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>

<div id="div1">
	<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

具体操作步骤

将被拖动的元素设置为拖放——属性draggable
```
<img draggable="true">
```

拖动开始——事件ondragstart & setData(类型, 值)

// 前提：给被拖动的元素绑定监听事件<div οndragstart="drag(event)"></div>
// 注意：一定是给被拖动的元素加
function drag(event){
    event.dataTransfer.setData("Text", event.target.id)	// 这里无法存储数据本身，所以只能通过存储 id 便于后面查找
}

放到何处—— 事件ondragover

默认地，无法将数据/元素放置到本元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

// 前提：给目标元素绑定监听事件<div οndragοver="allowDrop(event)"></div>
// 注意：这里是给目标元素，比如说要把 A 拖放到 B 中，那么这个就添加给 B
function allowDrop(event){
    event.preventDefault();	//取消默认的不允许放置
}

进行放置——事件ondrag
```
// 这里也是添加给目标元素
function drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}
```
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中

综合实例

实现一张图片在两个容器中相互拖放，效果如图：

代码如下：

<!-- 以下代码实现一张图片在两个容器中相互拖放，与开头的代码相比，只需给两个容器都注册好可以放置的事件即可 -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>拖放效果</title>
  <style type="text/css">
    #div1,
    #div2 {
      float: left;
      width: 100px;
      height: 75px;
      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>

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="images/rank.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="70">
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>