首先需要引入jQuery UI样式以及js文件
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>然后创建div
<div id="containment-wrapper" style="width: 100px;height: 100px; border: 1px solid red;"> <div id="drag1" style="width: 20%;height: 20%; border: 1px solid;">drag</div> </div>设置拖动及缩放事件
<script type="text/javascript"> $(function(){ $("#containment-wrapper").resizable();//设置缩放 $("#drag1").draggable({containment: "#containment-wrapper",scroll: false});//设置drag1只能在containment-wrapper中拖动 }); </script>
详细教程参考：http://www.runoob.com/jqueryui/jqueryui-tutorial.html
转载于:https://www.cnblogs.com/xiaoQ0725/p/8117868.html
