Jquery 实现div随意拖动

最新推荐文章于 2022-04-06 07:47:22 发布

小道仙97

最新推荐文章于 2022-04-06 07:47:22 发布

阅读量5.8k

点赞数

分类专栏： # JQuery 文章标签： Jquery 实现div随意拖动 Jquery 实现div拖动 div随意拖动 div拖动

本文链接：https://blog.csdn.net/Tomwildboar/article/details/81148897

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目的：使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

小道仙97

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：https://jqueryui.com/下面给出一个简单的拖动div代码。（记得把你js换成你的js）<!doctype html><html lang="en"><head> <meta charset=...
复制链接

扫一扫