H5 learn footprint (a)

H5 drag event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				.div2{
					width: 110px;
					height: 110px;
					background:lightblue
				}
				.div1{
					width: 110px;
					height: 110px;
					background:greenyellow;
					margin-top: 10px;
				}
		</style>
	</head>
	<body>
		<div class="div2">拖拽到此处,上传图片</div>
		<!-- H5拖拽属性draggable,使元素可拖拽的 -->
		<div class="div1" draggable="true"></div>
		
		
	</body>
	<script>
		const div1 = document.querySelector('.div1');
		const div2 = document.querySelector('.div2');
		
		// 鼠标拖拽事件
		// 鼠标点击拖拽的一瞬间
		div1.ondragstart = function(e){
			this.innerHTML = '2'
			// 处理拖拽事件火狐浏览器兼容性
			e.dataTransfer.setData('key','firefix')
		}
		// 鼠标拖拽元素移动事件
		div1.ondrag = function(){
			this.innerHTML += '1'
		}
		// 鼠标松开,拖拽结束事件
		div1.ondragend = function(){
			this.style.background = '#ff66cc'
		}
		
		// 拖拽到此处(用于H5拖拽图片到指定区域上传图片)  拖拽事件
		// 拖拽物进入到元素内的瞬间
		// div2.ondragenter = function(){}
		div2.addEventListener('dragenter',function(){
			this.style.background = 'red'
		})
		// 拖拽物在元素上时
		div2.addEventListener('dragover',function(e){
			this.innerHTML = '元素已拖入,尝试释放鼠标'
			// 此处阻止浏览器默认事件  防止图片拖到指定区域后被打开导致无法上传
			e.preventDefault();
			e.stopPropagation();
			return false;
		})
		// 拖拽物离开区域时
		div2.addEventListener('dragleave',function(){
			this.innerHTML = '拖拽到此处,上传图片'
		})
		// 拖拽物释放时,需要阻止默认事件并且阻止冒泡事件才可触发
		div2.addEventListener('drop',function(e){
			this.innerHTML = '成功拖入'
			
			// 此处阻止浏览器默认事件  防止图片拖到指定区域后被打开导致无法上传
			e.preventDefault();
			e.stopPropagation();
			return false;
		})
		
		
	</script>
	
	
	
	
</html>


Setting get dragged into drag event delete data Case

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div2{
				width: 110px;
				height: 110px;
				background:lightblue
			}
			.div1{
				width: 110px;
				height: 110px;
				background:greenyellow;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div2">拖入删除</div>
		<div class="div1" draggable="true"></div>
		<div class="div1" draggable="true"></div>
		<div class="div1" draggable="true"></div>
		<div class="div1" draggable="true" draggable="true"></div>
		<div class="div1" draggable="true"></div>
		<div class="div1" draggable="true"></div>
		<div class="div1" draggable="true"></div>
		
	</body>
	<script>
		const div1 = document.querySelectorAll('.div1');
		const div2 = document.querySelector('.div2');
		
		// 循环遍历设置拖拽事件
		div1.forEach(function(value,index){
			value.ondragstart = function(e){
				console.log(e.dataTransfer)
				// 兼容火狐
				// 用处:正在拖拽的元素设置数据,目标元素可以获取
				e.dataTransfer.setData('key',index);
				this.innerHTML = e.dataTransfer.getData('key')
			}
		})
		
		div2.addEventListener('dragenter',function(){
			
		})
		div2.addEventListener('dragover',function(e){
			this.style.background = 'red'
			e.preventDefault();
			e.stopPropagation();
			return false;
		})
		div2.addEventListener('dragleave',function(){
			this.style.background = 'lightblue'
		})
		
		// div2区域,div1拖入div2则获取数据删除对应拖拽的元素
		div2.addEventListener('drop',function(e){
			console.log(e.dataTransfer.getData('key'))
			document.body.removeChild(div1[e.dataTransfer.getData("key")]);
			this.innerHTML = '删除成功'
			e.preventDefault();
			e.stopPropagation();
			return false;
		})
		
		
	</script>
	
	
</html>


get the picture file information

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
		div{
			width: 200px;
			height: 200px;
			background:#000;
		}
		
		
	</style>
	<body>
		
		
		<div class=""></div>
		
	</body>
	
	<script>
		
			// FileReader 将图片信息转换成base64 得到的是图片的本体 
		// 拖入图片预览
		const div = document.querySelector('div');
		div.ondragover = function(e){
			
			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		
		div.ondrop = function(e){
			// 1.file对象  
			console.log(e.dataTransfer.files)
			for(var file of e.dataTransfer.files){
				console.log(file)
				// (1)创建文件读取对象
				const f = new FileReader()
				// (2)读取图片url
				f.readAsDataURL(file)
				// (3)加载图片信息
				f.onload = function(){
					const img = new Image()
					img.src = this.result;
					document.body.appendChild(img)
					
					// 图片信息传递到后台
					// this.result.ajax
				}
			}
			
			// item()方法用于获取批量拖入图片的指定图片
			// const file = e.dataTransfer.files.item(0);

			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		
	</script>
	
</html>


blob acquiring Image

<strong><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
		div{
			width: 200px;
			height: 200px;
			background:#000;
		}
		
		
	</style>
	<body>
		
		
		<div class=""></div>
		
	</body>
	
	<script>
		
		// blob 文件本身在内存当中 createObjectURL  得到的只是一个链接
		// 拖入图片预览
		const div = document.querySelector('div');
		div.ondragover = function(e){
			
			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		
		div.ondrop = function(e){
			// blob 把拖拽进来的图片转换成二进制 
			// blob 多用于视频拖入展示	

			// const file = e.dataTransfer.files.item(0);
			for(var file of e.dataTransfer.files){
				// 参数1.数组 2.文件类型
				const blob = new Blob([file],{type:'image/jpg'});
				// 创建文件链接
				const url = window.URL.createObjectURL(blob);
				console.log(url)
				const img = new Image();
				img.src = url;
				img.onload = function(){
					document.body.appendChild(img)
				}
			}
			
			
			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		
		
	</script>
	
</html>
</strong>

Other types of usage blob

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button id="btn">点击下载</button>
		<a href="" class="a"></a>
		
	</body>
	<script>
		// word文档下载
		//http://www.w3school.com.cn/media/media_mimeref.asp  w3c MIME参考手册
		var btn = document.querySelector('#btn')
		var a = document.querySelector('.a')
		btn.onclick = function(e){
			// blob 1.word文档内容  2.类型
			// 可以用来隐藏真实的下载地址, 可以防止别人爬虫
			const blob = new Blob(['word文档内容'],{type:'application/msword'})
			const url = window.URL.createObjectURL(blob)
			console.log(url)
			a.href = url
			a.click()
			
		}
		
		
		
		
	</script>
	
</html>

Guess you like

Origin blog.csdn.net/qq_39469688/article/details/93408905