javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果

最新推荐文章于 2021-06-16 17:11:27 发布

熟悉的新风景

最新推荐文章于 2021-06-16 17:11:27 发布

阅读量1.5k

点赞数 1

分类专栏： # JavaScript小案例 # javascript知识点

本文链接：https://blog.csdn.net/weixin_44797182/article/details/99128148

版权

javascript知识点同时被 2 个专栏收录

41 篇文章 4 订阅

订阅专栏

JavaScript小案例

28 篇文章 1 订阅

订阅专栏

在这里插入图片描述

例子

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5拖放API之回收站效果</title>
		<style type="text/css">
			#container {
				border: 1px solid;
				width: 300px;
				height: 250px;
				float: left;
			}

			/* 文件夹样式 */
			#container div {
				background: url(image/folder.png) no-repeat;
				text-align: center;
				float: left;
				margin: 20px;

				width: 100px;
				height: 80px;
				line-height: 80px;
			}

			/*设置回收站样式*/
			div#recycle {
				width: 200px;
				height: 200px;
				float: left;
				text-align: center;
				background: url(image/recycle.jpg) no-repeat;
				margin: 30px;
			}
		</style>

	</head>
	<body>
		<h3>HTML5拖放API之回收站效果</h3>
		<hr />
		<!--文件展示区域-->
		<div id="container">
			<div draggable="true" id="file1">
				文件1
			</div>
			<div draggable="true" id="file2">
				文件2
			</div>
			<div draggable="true" id="file3">
				文件3
			</div>
			<div draggable="true" id="file4">
				文件4
			</div>
		</div>
		<!--回收站区域-->
		<div id="recycle"></div>
		<script type="text/javascript">
			var oDiv = document.getElementById("container").getElementsByTagName("div");
			var recycle = document.getElementById("recycle");
						for (var i = 0; i < oDiv.length; i++) {
							oDiv[i].ondragstart = function(ev) {
								//设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型  
								ev.dataTransfer.setData("text", ev.target.id);
								console.log("开始拖动")
							}
						}
						recycle.ondragover = function(ev) {
							//解禁当前元素为可放置被拖拽元素的区域
							ev.preventDefault();
							console.log("这是放到可拖拽区域生出的文字");
						}
						recycle.ondrop = function(ev) {
							//解禁当前元素为可放置被拖拽元素的区域
							ev.preventDefault();
							//获取当前被放置的元素id名称
							var id = ev.dataTransfer.getData("text");
							//根据id名称获取元素对象
							var folder = document.getElementById(id);
							//获取文件夹区域并删除该元素对象
							document.getElementById("container").removeChild(folder);
							// oDiv.parentNode.removeChild(oDiv); //删除指定节点,一般通过id选择删除,担当要删除的不是一个时就尽量不要这个
						}

		</script>

	</body>
</html>
<!-- 
 1.将元素设置为可拖动draggable="true"，设置id
 2.在被拖拽元素上：开始拖动 document.ondragstart，只有设置了draggable="true"的才可以拖动，切拖动才有反应
	2.1 //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型  
3.拖拽区域，ondragover，ondrop解禁当前元素为可放置被拖拽元素的区域 
 -->