Native JS achieve Div drag

	//css代码
	<style>
		#window{width:500px;height:500px;position: relative;border:1px dotted green;}
		.son{width:100px;height:100px;background:red;position: absolute;}
	</style>

	//html代码
	<div id="window">
		<div class="son"></div>
	</div>

	//js代码
	<script>
		/*
		 实现拖拽效果主要跟鼠标的三个事件有关:    
		  onmousedown : 选择要拖拽的元素
			onmousemove : 移动元素
			onmouseup : 释放元素
		 * */
		var father=document.getElementById('box')
		var son=document.querySelector('#window>.son');
		son.onmousedown=function(event){
			var e=event||window.event;
			var x=e.clientX-this.offsetLeft;
			var y=e.clientY-this.offsetTop;
			
			son.onmousemove=function(event){
				var e=event||window.event;
				var jlx=e.clientX-x;
				var jly=e.clientY-y;
				son.style.left=jlx+'px';
				son.style.top=jly+'px';
			}
			son.onmouseup=function(){
				son.onmousemove=null;
			}
		}
	</script>

Guess you like

Origin blog.csdn.net/sneer_shen/article/details/94739223