HTML5拖放API，回收站效果

原创已于 2022-09-06 09:28:28 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #css #前端

于 2022-03-11 14:25:10 首次发布

html5&API 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用HTML5的拖放API创建一个回收站效果，详细讲解了API的概念并提供了完整的源码，包括HTML、JavaScript和CSS部分。通过示例代码，展示了如何实现拖放操作和界面展示，帮助开发者理解并实现类似功能。

部署运行你感兴趣的模型镜像

最终展示结果：

API概念：

————来自百度百科

API之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。提供API所定义的功能的软件称作此API的实现。API是一种接口，故而是一种抽象。

应用程序接口（英语：Application Programming Interface，简称：API），又称为应用编程接口，就是软件系统不同组成部分衔接的约定。由于近年来软件的规模日益庞大，常常需要把复杂的系统划分成小的组成部分，编程接口的设计十分重要。程序设计的实践中，编程接口的设计首先要使软件系统的职责得到合理划分。良好的接口设计可以降低系统各部分的相互依赖，提高组成单元的内聚性，降低组成单元间的耦合程度，从而提高系统的维护性和扩展性。

源码：

html及js部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3.1HTML5拖放API，回收站效果</title>
		<link rel="stylesheet" type="text/css" href="css/recycle.css"/>
	</head>
	<body>
		<h3>HTML5拖放API，回收站效果</h3>
		<hr >
		<div id="container">
			<div id="file1" class="folder" draggable="true" ondragstart="drag(event)">
				文件1
			</div>
			<div id="file2" class="folder" draggable="true" ondragstart="drag(event)">
				文件2
			</div>
			<div id="file3" class="folder" draggable="true" ondragstart="drag(event)">
				文件3
			</div>
			<div id="file4" class="folder" draggable="true" ondragstart="drag(event)">
				文件4
			</div>
		</div>
		
		<div id="recycle" ondragover="allowDrop(event)" ondrop="drop(event)">
			
		</div>
		
		
		<script type="text/javascript">
			// ondragstart事件回调函数
			function drag(ev){
				//设置传递的内容为被拖曳元素的id名称，数据类i选哪个为纯文本类型
				ev.dataTransfer.setData('text/plain',ev.target.id);
			}
			//ondrafover事件回调函数
			function allowDrop(ev){
				//解禁当前元素为可放置被拖曳元素的区域
				ev.preventDefault();
			}
			//ondrop事件回调函数
			function drop(ev){
				//接近当前元素为可放置被拖曳元素的区域
				ev.preventDefault();
				//获取当前被放置的元素id名称
				var id=ev.dataTransfer.getData("text");
				//根据id名称获取元素对象
				var folder=document.getElementById(id);
				//获取文件夹区域并删除该元素对象
				document.getElementById('container').removeChild(folder);
			}
		</script>
	</body>
</html>

css部分：

/* 设置用于放置文件夹的区域样式 */
#container{
	border: 1px solid;
	width: 300px;
	height: 250px;
	float: left;
}
/* 设置文件夹样式 */
.folder{
	text-align: center;
	float: left;
	margin: 20px;
	background: url(../images/folder_img.png) no-repeat;
	width: 100px;
	height: 80px;
	line-height: 80px;
}
/* 设置回收站样式 */
#recycle{
	width: 200px;
	height: 200px;
	float: left;
	text-align: center;
	background: url(../images/recycle_img.png) no-repeat;
	margin: 30px;
}

image资源

————ps修饰的png文件

您可能感兴趣的与本文相关的镜像

Facefusion

AI应用

FaceFusion是全新一代AI换脸工具，无需安装，一键运行，可以完成去遮挡，高清化，卡通脸一键替换，并且Nvidia/AMD等显卡全平台支持