拖拽div

怼烎@ 2023-10-06 15:32 65阅读 0赞

被拖拽元素需要绝对定位。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="shortcut icon" href="#" />
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
    #drag {
    	width: 200px;
    	height: 200px;
    	border: solid 1px gray;
    	position: absolute; /* 必须要绝对定位 */
    	background: gray;
    	cursor: move;
    }
    </style>
    </head>
    <body>
    	<div id="drag">
    		<input>
    	</div>
    	<script>
    		$(function() {
    			/*+++++ 拖曳效果 ++++++*/
    			var $drag = $('#drag');//被拖拽元素，必须要绝对定位
    			var mdragging = false;//标记拖曳状态
    			var miX, miY;//坐标位置
    
    			//按下鼠标，记录起始坐标位置，设置鼠标捕获
    			$drag.mousedown(function(e) {
    				mdragging = true;
    				miX = e.clientX - this.offsetLeft;
    				miY = e.clientY - this.offsetTop;
    				this.setCapture && this.setCapture();
    				return true;//改为false时，input输入框无法输入值。
    			});
    
    			//移动鼠标，绝对定位的元素位置=则当前坐标位置 - 记录起始坐标位置
    			$drag.mousemove(function(e) {
    				if (mdragging) {
    					var e = e || window.event;
    					var oX = e.clientX - miX;
    					var oY = e.clientY - miY;
    					$drag.css({
    						"left" : oX + "px",
    						"top" : oY + "px"
    					});
    					return false;
    				}
    			});
    			//放开鼠标，释放鼠标捕获，防止冒泡
    			$drag.mouseup(function(e) {
    				mdragging = false;
    				$drag[0].releaseCapture && $drag[0].releaseCapture();
    				e.cancelBubble = true;
    			})
    		});
    	</script>
    </body>
    </html>