原生js/jquery 实现拖拽功能

曾经终败给现在 2022-05-09 10:52 259阅读 0赞

### 原生JS实现  ###

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>拖拽功能</title>
    	</head>
    
    	<body>
    		
    		
    		<div style="width:100px;height: 100px;background-color: red;
    		position:absolute;left:0;top:0;"></div>
    		
    		<script type="text/javascript">
    			    //获得div
    			var div = document.getElementsByTagName('div')[0];
    
    			drag(div);
    			
    			
    			function drag(elem) {
    				var disX,
    					disY;
    		
    				elem.onmousedown = function (e) {
    					//兼容性操作
    					var event = e || window.event;
    					//鼠标按下的时候,距离元素的左/上距离     
    					disX = event.pageX - parseInt(elem.style.left);     //elem.style.left  返回的是字符串 XXXpx,
    					disY = event.pageY - parseInt(elem.style.top);		//用parseInt方法可以将数字提取出来
    					
    					document.onmousemove = function (e) {
    						
    						var event = e || window.event;
    								//鼠标按下的点(相对document) - 鼠标按下的点(相对当前点击的元素) 
    						elem.style.left = event.pageX - disX + "px";
    						elem.style.top = event.pageY - disY + "px";
    					}
    					//当鼠标按上时,使move事件失效,这样元素就不会再跟着移动了
    					document.onmouseup = function(e){
    						document.onmousemove = null;
    					}
    				}
    			}
    		</script>
    	</body>
    
    </html>

### Jquery实现  ###

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>拖拽功能</title>
    		<script src="js/jquery-3.1.0.js"></script>
    	</head>
    
    	<body>
    		
    		
    		<div style="width:100px;height: 100px;background-color: red;
    		position:absolute;left:0;top:0;"></div>
    		
    		<script type="text/javascript">
    			//获得div
    			var div = $("div");
    
    
    			drag(div);
    			
    			
    			function drag(elem) {
    				var disX,
    					disY;
    		
    				elem.mousedown(function(e){
    					
    					//兼容性操作
    					var event = e || window.event;
    					//鼠标按下的时候,距离元素的左/上距离     
    					disX = event.pageX - parseInt(elem.offset().left);     //elem.style.left  返回的是字符串 XXXpx,
    					disY = event.pageY - parseInt(elem.offset().top);		//用parseInt方法可以将数字提取出来
    					
    					
    					document.onmousemove = function (e) {
    						
    						var event = e || window.event;
    								//鼠标按下的点(相对document) - 鼠标按下的点(相对当前点击的元素) 
    						elem.offset({top: event.pageY - disY, left: event.pageX - disX});
    					}
    					//当鼠标按上时,使move事件失效,这样元素就不会再跟着移动了
    					document.onmouseup = function(e){
    						document.onmousemove = null;
    					}
    				});
    				
    			}
    		</script>
    	</body>
    
    </html>