拖拽会用到哪些事件

· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

· drag:拖拽期间在被拖拽元素上连续触发

· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html{
				padding: 0px;
				margin: 0px;
				width: 100%;
				height: 100%;
				position: relative;
			}
			#part1{
				width: 100px;
				height: 100px;
				background: #DA7C0C;
				position: absolute;
				z-index: 2;
			}
			#part2{
				width: 300px;
				height: 300px;
				border: 1px solid #DA7C0C;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -150px;
				position: absolute;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="part1" draggable="true" style="left: 0px;top:0px;"></div>
		<div id="part2" class="part2"></div>
	</body>
	<script type="text/javascript">
		var part1 = document.getElementById('part1');
		var startX, startY;
		
		part1.addEventListener('drag', function(e){
			console.log('part1  drag');		
		});
		
		part1.addEventListener('dragstart', function(e){
			console.log('part1  dragstart');
			startX = e.clientX;
			startY = e.clientY;			
		});
		
		part1.addEventListener('dragend', function(e){
			console.log('part1  dragend');
			part1.setAttribute("style", "left:" + parseFloat(parseFloat(part1.style.left) + e.clientX - startX) + 'px;' + "top:" + parseFloat(parseFloat(part1.style.top) + e.clientY - startY) + 'px');
		})
		
 
		var part2 = document.getElementById('part2');
		
		part2.addEventListener('dragenter', function(){
			console.log('part2 dragenter');
		});
		
		part2.addEventListener('dragover', function(){
			console.log('part2 dragover');
		});
		
		part2.addEventListener('dragleave', function(){
			console.log('part2 dragleave');
		});
		
		part2.addEventListener('drop', function(e){
			debugger;
			console.log('part2  drop');	
		});
	
	</script>
</html>