Jquery 实现div随意拖动

超、凢脫俗 2022-05-19 06:28 434阅读 0赞

# 目的：使div可以拖动。 #

注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。

需要用的到的插件下载：[https://jqueryui.com/][https_jqueryui.com]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

下面给出一个简单的拖动div代码。（记得把你js换成你的js）

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 拖动（Draggable） - 约束运动</title>
      <link rel="stylesheet" href="css/jquery-ui.min.css" />
     <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
     <script type="text/javascript" src="js/jquery-ui.min.js" ></script>
      <style>
    		#draggable3{
    			width: 280px;
    			height: 300px;
    			border: 1px black solid;
    			border-radius: 10px;
    			z-index: 1000;	
    		}
      	#containment-wrapper{ 
      		position: fixed; 
    			top: 0; left: 0;  
    			width: 100%; 
    			height: 100%; 
    			z-index: 999;		
    			background: gainsboro;
      	}
      </style>
      <script>
    	  $(function() { 
    	    $("#draggable3").draggable({ 
    	    	containment: "#containment-wrapper"
    	  	});	    
    	  });
      </script>
    </head>
    <body>
    	<div id="containment-wrapper">
    	  <div id="draggable3" class="ui-widget-content" >
    	    <p>我被约束在盒子里</p>
    	  </div>
    	</div>
    </body>
    </html>

如果你想了解更多，不一样的div拖动，请移步至此：[http://www.runoob.com/jqueryui/example-draggable.html][http_www.runoob.com_jqueryui_example-draggable.html]

[https_jqueryui.com]: https://jqueryui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220519/f876104f88ae49f6af84b881f1447659.png
[http_www.runoob.com_jqueryui_example-draggable.html]: http://www.runoob.com/jqueryui/example-draggable.html