使用jQuery实现div可拖拽功能

﹏ヽ暗。殇╰゛Y 2022-08-06 12:16 325阅读 0赞

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style type="text/css">
    	*{margin: 0;padding: 0;}
    	body{height: 100%;font-size: 14px;}
    	.left-column{position: absolute;left: 0;right: 330px;height: 100%;
    			margin-top: -2px;border: 1px solid red;background: #eee;}
    	.detail{position: absolute;top: 80px;left: 80px;width: 250px;
    			height: 30px;background: #333;border-radius:8px 8px 0 0;}
    	.box{position: absolute;top: 20px;left: 0;width: 360px;
    			height: 280px;background: #333;border-radius:8px;padding: 10px;}
      </style>
      <script src="jquery-1.9.1.min.js"></script>
      <script type="text/javascript">
    	$(function(){
    		$(".drag-box").mousedown(function(e){
    			//改变鼠标的形状
    			$(this).css("cursor","move");
    
    			//获取div元素的位置
    			var offset = $(this).offset();
    			
    			//获取鼠标元素相对div的偏移量
    			var x = e.pageX - offset.left;
    			var y = e.pageY - offset.top;
    
    			/*鼠标键按下时，添加mousemove事件绑定*/
    			$(document).bind("mousemove",function(ev){
    				//$(".drag-box").stop(); //可防止使用jquery时的效果混乱现象
    				var xOffset = ev.pageX - x;
    				var yOffset = ev.pageY - y;
    
    				//方法一：jquery
    				//$(".drag-box").animate({left:xOffset,top:yOffset},10);
    
    				//方法二：原生js
    				$(".drag-box").css("left", xOffset);
    				$(".drag-box").css("top", yOffset);
    			});			
    		});
    
    		/*鼠标键按起时，取消mousemove事件绑定*/
    		$(document).mouseup(function(){
    			$(this).css("cursor","default");
    			$(this).unbind("mousemove");
    		});
    	})
      </script>
     </head>
     <body>
      <div class="left-column">
    	<div class="detail drag-box">
    		<div class="box"></div>
    	</div>
      </div>
      <div class="right-column"></div>
     </body>
    </html>

### **效果图如下：** ###

![SouthEast][]

[SouthEast]: /images/20220806/56c4f12f9c7c4d149e880bed7ebd7e86.png