HTML5 拖放

HTML5 拖放

拖动源对象（会动），触发三个事件
dragstart：拖动开始，在源对象开始被拖放时触发
drag：拖动中，在源对象拖放过程中被触发
dragend：拖动结束，在源对象释放后被触发（也可能在目标区域内，也可能在目标区域外）
拖动目标对象（不动），触发四个事件
dragenter：拖动进入，在源对象进入目标对象的区域范围时被触发
dragover：拖动悬停，源对象在目标对象悬停时触发
注意：浏览器块（div等）默认禁止拖拽事件的拖放操作，所以若想监听 drop 操作，需要在 dragover 中阻止元素发生默认的行为，然后就可以监听到drop了
在该事件内调用event.preventDefault()方法
dragleave：拖动离开，在源对象拖动离开目标对象时触发
drog：拖动释放，源对象在目标对象范围内释放时触发

拖动事件的触发顺序
dragstart --> drag --> dragenter–>dragover–> drop–>dragend

//删除小飞机
<img src="img/1.png"id="f1"draggable="true" >
		<img src="img/2.png"id="f2"draggable="true" >
		<img src="img/3.png"id="trash"draggable="true" >
		<img src="img/4.png"id="f3"draggable="true" >
		
		<script type="text/javascript">
			// 拖动
			// 源对象
			let prc=[];
			let f1=document.getElementById('f1');
			// 开始拖动
			f1.addEventListener('draggesture',(e)=>{
				console.log('开始拖动')
				prc[0]=f1;
				e.dataTransfer.setData('hello','world')
			});
			f1.addEventListener('drag',()=>{
				console.log('拖动中')
			});
			f1.addEventListener('dragend',()=>{
				console.log('拖动结束')
			});
			// 目标对象
			let trash=document.getElementById('trash');
			// 拖动源对象进入
			trash.addEventListener('dragenter',()=>{
				console.log('源对象进入目标对象')
			});
			
			trash.addEventListener('dragover',(e)=>{
				// 阻止捕获
				e.preventDefault()
				console.log('源对象悬停目标对象')
			});
			trash.addEventListener('dragleave',()=>{
				console.log('源对象离开目标对象')
			});
			trash.addEventListener('drop',(e)=>{
				console.log('源对象释放目标对象')
				console.log(e.dataTransfer.getData('hello'));
				prc[0].remove();
			});

dataTransfer属性
提示：拖放事件的dataTransfer属性将返回DataTransfer 对象，用于保存拖放数据
DataTransfer对象
setData()
用于给指定的类型设置数据，如果类型不存在则自动添加到到未尾，如果存在的话，则替换原来的值
DataTransfer.setData(type,value)
getData()
用于获取指定类型的数据
var dataValue = DataTransfer.getData(type)