有一排div 吧。

然後我讓第一個變大，第二個就變小。用ui的resizable方法可以實現，但是有bug。當滑動很快時有很多問題。。研究了一下午，終於在stackoverflow上找到解決方法。網址如下：http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse/10247741#10247741

另外這個方法有點小問題，需要自己改一下，可能是他用的jquery版本太低。

如下是我改完的程式碼：

1. $.ui.plugin.add(
   "resizable", "alsoResizeReverse", {  
2.     start: function(event, ui) {  
3.         var self = $(this).data("uiResizable"),  
4.         o = self.options;  
5.         var _store = function(exp) {  
6.             $(exp).each(function() {  
7.                 $(this).data("resizable-alsoresize-reverse", {  
8.                     width: parseInt($(this
   ).width(), 10), height: parseInt($(this).height(), 10),  
9.                     left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)  
10.                 });  
11.             });  
12.         };  
13.         if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {  
14.             if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }  
15.             else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }  
16.         }else{  
17.             _store(o.alsoResizeReverse);  
18.         }  
19.     },  
20.     resize: function(event, ui){  
21.         var self = $(this).data("uiResizable"), o = self.options, os = self.originalSize, op = self.originalPosition;  
22.         var delta = {  
23.                 height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,  
24.                 top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0  
25.             },  
26.             _alsoResizeReverse = function(exp, c) {  
27.                 $(exp).each(function() {  
28.                     var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];  
29.                     $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {  
30.                         var sum = (start[prop]||0) - (delta[prop]||0);  
31.                         if (sum && sum >= 0)  
32.                             style[prop] = sum || null;  
33.                     });  
34.                     //Opera fixing relative position
35.                     if (/relative/.test(el.css('position')) && false) {  
36.                         self._revertToRelativePosition = true;  
37.                         el.css({ position: 'absolute', top: 'auto', left: 'auto' });  
38.                     }  
39.                     el.css(style);  
40.                 });  
41.             };  
42.         if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {  
43.             $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });  
44.         }else{  
45.             _alsoResizeReverse(o.alsoResizeReverse);  
46.         }  
47.     },  
48.     stop: function(event, ui){  
49.         var self = $(this).data("uiResizable");  
50.         //Opera fixing relative position
51.         if (self._revertToRelativePosition && $.browser.opera) {  
52.             self._revertToRelativePosition = false;  
53.             el.css({ position: 'relative' });  
54.         }  
55.         $(this).removeData("resizable-alsoresize-reverse");  
56.     }  
57. });  

1. $("#div1").resizable({  
2.     grid: [ 20, 20 ],  
3.     handles:'e',  
4.     minWidth:20,  
5.     alsoResizeReverse: "#div2",  
6.     resize:function(event,ui){  
7.         $(this).resizable( "option", "maxWidth", div1.width()+div2.width()-20 );  
8.     }  
9. });  

另外發現一個bug，如果是css有box-sizing:border-box;屬性，div會一次一次的縮小...找個時間改一下。