Jquery UI resizable 方法 bug 解决办法。

现在有这样一个需求，我需要改变两个div的大小，一个变大，另一个就需要变小。

有一排div 吧。

然后我让第一个变大，第二个就变小。用ui的resizable方法可以实现，但是有bug。当滑动很快时有很多问题。。研究了一下午，终于在stackoverflow上找到解决方法。网址如下：http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse/10247741#10247741

另外这个方法有点小问题，需要自己改一下，可能是他用的jquery版本太低。

如下是我改完的代码：

$.ui.plugin.add("resizable", "alsoResizeReverse", {
    start: function(event, ui) {
        var self = $(this).data("uiResizable"),
        o = self.options;
        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
                    left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };
        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },
    resize: function(event, ui){
        var self = $(this).data("uiResizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
                height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
                top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
            },

            _alsoResizeReverse = function(exp, c) {
                $(exp).each(function() {
                    var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];

                    $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
                        var sum = (start[prop]||0) - (delta[prop]||0);
                        if (sum && sum >= 0)
                            style[prop] = sum || null;
                    });

                    //Opera fixing relative position
                    if (/relative/.test(el.css('position')) && false) {
                        self._revertToRelativePosition = true;
                        el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                    }

                    el.css(style);
                });
            };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
            $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
        }else{
            _alsoResizeReverse(o.alsoResizeReverse);
        }
    },

    stop: function(event, ui){
        var self = $(this).data("uiResizable");

        //Opera fixing relative position
        if (self._revertToRelativePosition && $.browser.opera) {
            self._revertToRelativePosition = false;
            el.css({ position: 'relative' });
        }
        $(this).removeData("resizable-alsoresize-reverse");
    }
});

调用如下：

    $("#div1").resizable({
        grid: [ 20, 20 ],
        handles:'e',
        minWidth:20,
        alsoResizeReverse: "#div2",
        resize:function(event,ui){
            $(this).resizable( "option", "maxWidth", div1.width()+div2.width()-20 );
        }
    });

另外发现一个bug，如果是css有box-sizing:border-box;属性，div会一次一次的缩小...找个时间改一下。