jQuery UI实现div的拖动、缩放功能

首先需要引入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=" 100px;height: 100px; border: 1px solid red;">
　　<div id="drag1" style=" 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