Js events used in drag

1. The use of drag and drop events js
drag、dragstart、dragend、dragenter、dragover、dragleave、drop
2. The code shows
<!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>
Js events used in drag

Guess you like
