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="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