Jquery 实现div随意拖动

目的:使div可以拖动。

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

需要用的到的插件下载:https://jqueryui.com/

下面给出一个简单的拖动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

 

全部评论

相关推荐

不愿透露姓名的神秘牛友
06-25 19:15
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
06-26 14:50
人力小鱼姐:有后面墨迹那两句的时间问题早回答完了
点赞 评论 收藏
分享
06-04 09:27
门头沟学院 Java
点赞 评论 收藏
分享
06-27 12:30
延安大学 C++
实习+外包,这两个公司底层融为一体了,如何评价呢?
一表renzha:之前面了一家外包的大模型,基本上都能答出来,那面试官感觉还没我懂,然后把我挂了,我都还没嫌弃他是外包,他把我挂了……
第一份工作能做外包吗?
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务