div 拖拽布局

许多时候，我们需要用户可以调整网页中div的大小，当用户增大一个div的宽度时，需要同时减小临近div的宽度，以防止网页宽度发生变化。这里，我们使用了jQuery UI来帮助我们实现。因此我们需要引入jQuery和jQuery UI。

[html]  view plain  copy

1. <script src="js/jquery-3.1.1.min.js"></script>  
2. <script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>  

主体HTML代码：

[html]  view plain  copy

1. <span style="font-size:18px;"><div class="content">  
2.     <div id="left"></div>  
3.     <div id="middle"></div>  
4.     <div id="right"></div>  
5. </div></span>  

效果图：

当用户拖拽两条黑框中所示的div边缘时，边缘两侧div的大小都会发生变化：

扫描二维码关注公众号，回复： 1370372 查看本文章

JS代码：

[javascript]  view plain  copy

1. $('#left').resizable({  
2.     handles:'e', //'e'是east，允许拖动右侧边框的意思  
3.     maxWidth:500,  
4.     minWidth:230,  
5.     //resize方法在#left大小改变后被执行  
6.     resize:function(event,ui){ //由于我们调整的是#left的大小，当#left改变时，要同时改变#middle的大小  
7.         $('#middle').width($('#content').width()-ui.size.width-$('#right').width());  
8.     }  
9. });  
10. $('#middle').resizable({  
11.     handles:'e',  
12.     maxWidth:($('#content').width()-$('#left').width())*0.7,  
13.     minWidth:($('#content').width()-$('#left').width())*0.3,  
14.     resize:function(event,ui){ //由于我们调整的是#middle的大小，当#middle改变时，要同时改变#right的大小  
15.         $('#right').width($('#content').width()-ui.size.width-$('#left').width());  
16.     }  
17. });  
18.   
19. //当窗口大小改变时，也要等比例缩放各个div的宽度  
20. $(window).resize(function() {  
21.     //计算缩放比例，bili=新的容器的宽度 除以 旧的容器的宽度  
22.     let bili=$('#content').width()/($('#left').width()+$('#middle').width()+$('#right').width());  
23.     $('#left').width($('#left').width()*bili);  
24.     $('#middle').width($('#middle').width()*bili);  
25.     $('#right').width($('#right').width()*bili);  
26. });  
27.   
28. //当三个div的大小被用户调整时，阻止resize事件冒泡到window上，使得window的resize事件被误触发  
29. $('body').bind('resize',function(){return false;})