resizable辅助线（陈年渣代码的粗说明）

resizable : function(arr) {
        var resizetype;
        var MIN_DISTANCE = 8; // 捕获的最小距离
        var guides = []; // 没有可用的引导
        var innerOffsetX, innerOffsetY;
        var prevPosition;
        var prevSize;
        if ($(arr).hasClass('label-item')) {
            var minwidth = Utils.computeFontWidth($(arr[0]).html(), $(arr[0]).css('font'));
        }

 

//缩放逻辑
        $(arr).resizable({
            containment : '#form_mid',
            handles : 'w,e',
            minWidth : minwidth,
            start : function(event, ui) {
                Designer.selectitem(this); //选中当前容器
                Designer.unselectitem($(".select").not(this));//取消选择其他容器
                prevPosition = ui.originalPosition;//记录当前位置
                prevSize = ui.originalSize;//记录当前size
                guides = $.map($(this).parent().children().not(this).not($('.guide')), Utils.computeGuidesForElement);

                //计算所有非当前节点、非辅助线的元素的位置，记录当前容器下垂直辅助线（竖着的线）的位置

                //我这里没又用到上下的缩放，所以不记录水平的辅助线（横着的线）位置
            },
            resize : function(event, ui) {
                var pos = {
                    top : ui.position.top,
                    left : ui.position.left
                };
                var size = {
                    width : ui.size.width,
                    height : ui.size.height
                };

                resizetype = pos.left == prevPosition.left ? 'e' : 'w';

                var guideV, guideH, distV = MIN_DISTANCE + 1, distH = MIN_DISTANCE + 1, offsetV, offsetH;
                var chosenGuides = {
                    top : {
                        dist : MIN_DISTANCE + 1
                    },
                    left : {
                        dist : MIN_DISTANCE + 1
                    }
                };
                var $t = $(this);
                // 相对form-mid的位置，form-mid为父容器即画板
                var pos = {
                    top : ui.position.top,
                    left : ui.position.left
                };
                var w = $t.outerWidth();
                var h = $t.outerHeight();
                // 相对form-mid的六边：边线和中线
                var elemGuides = Utils.computeGuidesForElement(null, pos, w, h, resizetype);
                $.each(guides, function(i, guide) {
                    $.each(elemGuides, function(i, elemGuide) {
                        if (guide.type == elemGuide.type) {
                            var prop = guide.type == "h" ? "top" : "left";
                            var d = Math.abs(elemGuide[prop] - guide[prop]);
                            if (d < chosenGuides[prop].dist) {
                                chosenGuides[prop].dist = d;
                                chosenGuides[prop].offset = elemGuide[prop] - pos[prop];
                                chosenGuides[prop].guide = guide;
                            }
                        }
                    });
                });

                //如果缩放的边与记录中的某条辅助线相近，则显示这条线，并调整缩放容器的宽，做到磁吸效果

                if (chosenGuides.left.dist <= MIN_DISTANCE) {
                    $("#guide-v").css("left", chosenGuides.left.guide.left).show();
                    if (resizetype == 'w') {
                        var right = prevPosition.left + prevSize.width + 1;
                        if (chosenGuides.left.offset == 0) ui.position.left = chosenGuides.left.guide.left - chosenGuides.left.offset;
                        else ui.position.left = 2 * chosenGuides.left.guide.left - 1 - right;
                        ui.size.width = right - ui.position.left - 1;
                    }
                    if (resizetype == 'e') {
                        if (Math.abs(ui.size.width - chosenGuides.left.offset) < 10) ui.size.width = chosenGuides.left.guide.left - prevPosition.left - 1;
                        else ui.size.width = 2 * (chosenGuides.left.guide.left - prevPosition.left - 1);
                    }
                } else {
                    $("#guide-v").hide();
             
                }
            },
            stop : function(event, ui) {
                Designer.setDirty();
                $("#guide-v, #guide-h").hide();
            }
        });
    },