H5拖放API使用及小案例实现

H5拖放API

HTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件，在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置，并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素，到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
主流浏览器支持情况如下：

在这里插入图片描述

IE9+Firefox3.5Opera11.5Chrome4.0Safari4+
√√√√5.21不支持

拖放属性

事件名称触发事件的元素说明
dragstart该事件由被拖拽的元素触发。当用户刚开始拖动元素时触发该事件。
drag该事件由被拖拽的元素触发。当元素处于被拖动状态时触发该事件。
dragenter该事件由被拖拽的元素触发。当被拖动的元素进入到可以被放置下来的有效区域的瞬间触发该事件。
dragenddragend拖放操作结束
dragover该事件由目标区域元素触发。当被拖动的元素处于可以被放置下来的有效区域内时，该事件会不停地被触发。该事件状态在dragenter之后，在dragleave之前。
dragleave该事件由被拖拽的元素触发。当被拖动的元素离开了可以被放置下来的有效区域的瞬间触发该事件。
drop该事件由目标区域元素触发。当被拖动的元素被放置在有效的区域时触发该事件。

拖放生命周期触发事件的顺序

  1. dragstart
  2. drag
  3. dragenter
  4. dragover
  5. dragleave
  6. drop
  7. dragend

拖动事件尝试

<!-- 
draggable 属性 是设置元素为可拖动的
	true : 可以拖动
	false：不可拖动
-->
<div id="box" draggable="true"></div>
<script type="text/javascript">
// 获取源对象
var box=document.querySelector('#box');
			
// 拖拽开始时触发，只会触发一次
box.ondragstart=function(){
	console.log('拖拽开始');
	box.style.background="#336699";
}
	// 拖拽触发的事件，连续触发，只要鼠标不松开就会一直触发
box.ondrag=function(){
	console.log('拖动的过程中');
	box.style.background="#336699";
	box.style.opacity='0.2';
}
			
// 拖动结束时，触发该事件，只要鼠标一松开就触发
box.ondragend=function(){ //
	console.log('拖动结束时');
	box.style.background="orange";
	box.style.opacity='1';
}
			
			
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
	width: 200px;
	height: 200px;
	background-color: orange;
}
</style>

释放事件尝试

<div id="box" draggable="true"></div>
			
<div id="trash">
	目标对象
</div>
<script type="text/javascript">
	// 获取源对象
	var box =document.getElementById('box');
	
	// 开拖动时
	 box.ondragstart=function(e){
		// 记录开始拖动时的，鼠标在div盒子上的偏移量
	 	offsetX=e.offsetX;
		offsetY=e.offsetY;
	 }
	
	 box.ondrag=function(e){
	 	var x =e.pageX;
	 	var y= e.pageY;
		
	 	// console.log(x,y);
	 	if(x==0 && y==0)return;//不处理拖动最后一刻x和y都为0情形
		y-=offsetY;
	 	x-=offsetX;
		
	 	box.style.left=x+'px';
	 	box.style.top=y+'px';
	 }
	
	// 为目标对象添加事件监听 --- 删除拖动的源对象
	var trash =document.getElementById('trash');
	
	trash.ondragenter=function(){
		console.log('源对象进入到了目标对象');
		// trash.style.background='orange';
	}
	
	/* 
		ondragover 和 ondragleave 事件 的默认行为是拒绝任何被拖放的元素.
		因此必须阻止这种默认行为，不然ondrop会失效
	 
	 */
	trash.ondragover=function(e){
		console.log('源对象进入目标对象');
			// e.preventDefault();
			return false;
	}
	trash.ondragleave=function(e){
		console.log('源对象离开目标对象');
		e.preventDefault();
	}
	
	// 在目标对象中释放了源对象
	trash.ondrop=function(e){
		console.log('释放了');
		// 从父元素中删除子节点
		box.parentNode.removeChild(box);
	}
	
</script>
<style type="text/css">
	*{margin: 0;padding: 0;}
	#box{
		width: 200px;
		height: 200px;
		background-color: orange;
		/* 元素绝对定位，修改top、lef值 */
		position: absolute;
	}
	
	
	#trash{
		width: 400px;
		height: 400px;
		border: 2px solid #FF1493;
		margin-left: 250px;
	}
</style>

datatransfer 对象
HTML5拖放API允许在拖放过程中携带一项或多项自定义数据内容。这些数据内容可以使用拖放事件DragEvent中的datatransfer属性进行添加和处理，该属性来源于HTML5中的DataTransfer对象，其中包含的每项数据均可有独立的数据类型。

DataTransfer对象的常用属性：

属性名称说明
dropEffect用于获取或重置当前的拖放类型，共有4种取值。
effectAllowed提供所有允许的拖放类型。
types该属性返回值为字符串数组，包含了所有存入数据的类型。
items该属性返回值为DataTransferItemList对象。
files如果拖放的是一个或多个本地文件，该属性返回值为文件列表对象。

datatransfer 方法

方法名称说明
getData(format)从dataTransfer对象取出数据
setData(format,data)在dragstart事件调用此函数，在dataTransfer对象中存储此对象
clearData()清除DataTransfer对象中数据。如果省略参数则表示清除全部数据
addElement（element）提供一个页面元素作为参考，同时使用参数作为拖放反馈图像
setDragImage(image,x,y)设置拖拽元素时所显示的自定义图标。其中image为图片对象，x和y分别指的是图标与鼠标在水平和垂直方向上的距离。

案例实现（实现图片拖动，记得自己添加图片）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.add_border{
				float: left;
				border: 3px #ccc dashed;
				margin: 10px;
				min-height: 100px;
				padding: 10px;
				width: 300px;
			}
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
			1.通过拖放将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域；
			2.拖拽过程中，“温馨提示”部分要及时提醒，当前正在进行拖放操作；
		 -->
		<div id="info"><h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2></div>
		<!-- 拖拽元素(源对象) -->
		<div id="album" class="add_border">
			<h2>相册</h2>
			<img src="img/图片1.jpg" draggable="true" id="img1">
			<img src="img/图片2.jpg" draggable="true" id="img2">
			<img src="img/图片3.jpg" draggable="true" id="img3">
		</div>
		<!-- <img src="img/1.png" id="test"> -->
		<!-- 目标对象 -->
		<div id="trash" class="add_border"><h2>垃圾箱</h2></div>
		 
		<script type="text/javascript">
			// 获取源对象 和 目标对象
			var album  =document.getElementById('album');
			var tarsh =document.getElementById('trash');
			var info =document.getElementById('info');
			
			// 开始拖放操作
			album.ondragstart=function(e){
				// 得到被拖放的照片（img）id
				var dragImgId = e.target.id;
				// 得到被拖动元素
				var dragImg = document.getElementById(dragImgId);
				
				// 拖拽结束
				dragImg.ondragend=function(){
					info.innerHTML='<h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2>'
				}
				// 存放被拖拽的元素
				e.dataTransfer.setData('dragImgId',dragImgId)
				
			}
			
			// 拖拽的过程
			album.ondrag=function(){
				info.innerHTML='<h2>照片正在被拖动</h2>'
			}
			
			// 关闭默认处理
			tarsh.ondragenter=function(){return false}
			tarsh.ondragover=function(){return false}
			
			// 源对象进入到目标元素并且释放时
			tarsh.ondrop=function(e){
				var dragImgId= e.dataTransfer.getData('dragImgId');
				// 得到被拖动元素
				var dragImg = document.getElementById(dragImgId);
				// console.log(dragImg);
				
				// 从相册div中删除该照片的节点
				dragImg.parentNode.removeChild(dragImg);
				
				// 将被拖动的照片dom节点添加到垃圾箱中的div中
				tarsh.appendChild(dragImg);
				info.innerHTML='<h2>温馨提示：可以将照片直接拖入到垃圾箱中</h2>'
			}
			
		 // var test=	document.getElementById('test');
		 // console.log(test);
		 // test.remove();
		</script>
	</body>
</html>

案例实现（拖拽文件显示文件信息）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#section{
				height: 300px;
				width: 50%;
				margin-top: 30px;
				border: 2px #FFA500 solid;
			}
		</style>
	</head>
	<body>
		<!-- 从浏览器外面吧文件拖动到投放区域，并显示文件的信息 -->
		<div id="section">
			将文件拖放到此区域释放
		</div>
		
		<table border="1" id="msg">
			<tr>
				<th>名称</th>
				<th>文件大小</th>
				<th>文件类型</th>
			</tr>
			
		</table>
		
		<script type="text/javascript">
			// 得到目标对象（文件存放区域）
			var sec =document.querySelector('#section');
			// 信息存放区
			var msg =document.querySelector('#msg');
			// 关闭默认事件
			sec.ondragover=function(e){
				e.preventDefault();
			}
			sec.ondrop=function(e){
				e.preventDefault();
				// types 拖拽的类型
				// console.log(e.dataTransfer.types);//files
				
				// 拖拽元素进入投放区并且显示文件样式
				// console.log(e.dataTransfer.files[0])
				for(var i=0;i<e.dataTransfer.files.length;i++){
					var file = e.dataTransfer.files[i];
					// 想要知道file属性中有什么字段，可以直接打印
					console.log(file)
					
					var html = "<tr><td>"+file.name+
								"<td>"+file.size+"</td>"+
								"<td>"+file.type+"</td>"+
								"</td></tr>";
					msg.innerHTML+=html;
					
					
				}
				
			}
		</script>
	</body>
</html>

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

# html5
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区