又来提问题了，这次是关于动态生成 缩放框架的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拉缩放效果</title>
</head><body><script>var isIE = (document.all) ? true : false;var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments,2);
//alert(args);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};//缩放程序
var SimpleResize = Class.create();
SimpleResize.prototype = {
  initialize: function(obj, options) {
this._obj = $(obj);

//alert(this);
this._fR = BindAsEventListener(this, this.Resize);
this._fS = Bind(this, this.Stop);

this._obj.style.position = "absolute";
  },
  //设置触发对象
  Set: function(resize, side) {
var resize = $(resize), fun;
if(!resize) return;
switch (side.toLowerCase()) {
case "up" :
fun = this.Up;
break;
case "down" :
fun = this.Down;
break;
case "left" :
fun = this.Left;
break;
case "right" :
fun = this.Right;
break;
case "left-up" :
fun = this.LeftUp;
break;
case "right-up" :
fun = this.RightUp;
break;
case "left-down" :
fun = this.LeftDown;
break;
case "right-down" :
default :
fun = this.RightDown;
};
//alert(resize.id);
addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));
  },
  //准备缩放
  Start: function(e, fun) { //防止冒泡(跟拖放配合时设置)
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
//设置执行程序
this._fun = fun;

this._styleWidth =  this._obj.clientWidth;
this._styleHeight = this._obj.clientHeight;
this._styleLeft = this._obj.offsetLeft;
this._styleTop = this._obj.offsetTop;

this._sideLeft = e.clientX - this._styleWidth;
this._sideRight = e.clientX + this._styleWidth;
this._sideUp = e.clientY - this._styleHeight;
this._sideDown = e.clientY + this._styleHeight;

this._fixLeft = this._styleWidth + this._styleLeft;
this._fixTop = this._styleHeight + this._styleTop;

addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
if(isIE){
addEventHandler(this._obj, "losecapture", this._fS);
this._obj.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
e.preventDefault();
}
  },  
  //缩放
  Resize: function(e) {
this._fun(e);
with(this._obj.style){
width = this._styleWidth + "px"; height = this._styleHeight + "px";
top = this._styleTop + "px"; left = this._styleLeft + "px";
}
  },
  //缩放程序
  //上
  Up: function(e) {
  
this._styleHeight = Math.max(this._sideDown - e.clientY, 0);
this._styleTop = this._fixTop - this._styleHeight;
  },
  //下
  Down: function(e) {
  
this._styleHeight = Math.max(e.clientY - this._sideUp, 0);
  },
  //右
  Right: function(e) {
this._styleWidth = Math.max(e.clientX - this._sideLeft, 0);
  },
  //左
  Left: function(e) {
this._styleWidth = Math.max(this._sideRight - e.clientX, 0);
this._styleLeft = this._fixLeft - this._styleWidth;
  },
  //右下
  RightDown: function(e) {
this.Right(e); this.Down(e);
  },
  //右上
  RightUp: function(e) {
this.Right(e); this.Up(e);
  },
  //左下
  LeftDown: function(e) {
this.Left(e); this.Down(e);
  },
  //左上
  LeftUp: function(e) {
this.Left(e); this.Up(e);
  },
  
    RepairX: function(iWidth, mxWidth) {
iWidth = this.RepairWidth(iWidth, mxWidth);
if(this.Scale){
var iHeight = this.RepairScaleHeight(iWidth);
if(this.Max && iHeight > this._mxScaleHeight){
iHeight = this._mxScaleHeight;
iWidth = this.RepairScaleWidth(iHeight);
}else if(this.Min && iHeight < this.minHeight){
var tWidth = this.RepairScaleWidth(this.minHeight);
if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
}
this._styleHeight = iHeight;
this._styleTop = this._scaleTop - iHeight / 2;
}
this._styleWidth = iWidth;
  },
  //垂直方向
  RepairY: function(iHeight, mxHeight) {
iHeight = this.RepairHeight(iHeight, mxHeight);
if(this.Scale){
var iWidth = this.RepairScaleWidth(iHeight);
if(this.Max && iWidth > this._mxScaleWidth){
iWidth = this._mxScaleWidth;
iHeight = this.RepairScaleHeight(iWidth);
}else if(this.Min && iWidth < this.minWidth){
var tHeight = this.RepairScaleHeight(this.minWidth);
if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }
}
this._styleWidth = iWidth;
this._styleLeft = this._scaleLeft - iWidth / 2;
}
this._styleHeight = iHeight;
  },
  
  //停止缩放
  Stop: function() {
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
    if(isIE){
removeEventHandler(this._obj, "losecapture", this._fS);
this._obj.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
 
 
  }  
};</script><script type="text/javascript" src="Drag.js"></script>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
position:absolute;
background:#C00;
width:7px;
height:7px;
z-index:5;
font-size:0;
}#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}#rLeftDown{left:-4px;bottom:-4px;}
#rRightUp{right:-4px;top:-4px;}
#rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
#rLeftUp{left:-4px;top:-4px;}
#rRight{right:-4px;top:50%;margin-top:-4px;}
#rLeft{left:-4px;top:50%;margin-top:-4px;}
#rUp{top:-4px;left:50%;margin-left:-4px;}
#rDown{bottom:-4px;left:50%;margin-left:-4px;}#jiantou{position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1;}
.drag{ width:100px; height:60px; top:50px; left:50px;}
</style><div>  <input type="button" value="创建" onclick="createtuodong()"></div><div id="tuodongqun"></div>
<script>winid=1;
i=80;function createtuodong(){
var dd1 = document.createElement("div");dd1.id="dragDiv"+winid.toString();
dd1.className="drag";dd1.style.left=(15+i).toString()+"px";
dd1.style.top=(15+i).toString()+"px";
i=i+50;var jiantoudiv = document.createElement("div");
var jiantoupic = document.createElement("img");
jiantoupic.id="jiantou";
jiantoupic.src="jiantou1.png";var dd2 = document.createElement("div");
dd2.id="rRightDown";
var dd3 = document.createElement("div");
dd3.id="rLeftDown";
var dd4 = document.createElement("div");
dd4.id="rRightUp";
var dd5 = document.createElement("div");
dd5.id="rLeftUp";
var dd6 = document.createElement("div");
dd6.id="rRight";
var dd7 = document.createElement("div");
dd7.id="rLeft";
var dd8 = document.createElement("div");
dd8.id="rUp";
var dd9 = document.createElement("div");
dd9.id="rDown";dd1.appendChild(jiantoudiv);
jiantoudiv.appendChild(jiantoupic);
dd1.appendChild(dd2);
dd1.appendChild(dd3);
dd1.appendChild(dd4);
dd1.appendChild(dd5);
dd1.appendChild(dd6);
dd1.appendChild(dd7);
dd1.appendChild(dd8);
dd1.appendChild(dd9);
document.getElementById("tuodongqun").appendChild(dd1);//添加var rs = new SimpleResize(dd1.id);rs.Set(dd2.id, "right-down");
rs.Set(dd3.id, "left-down");rs.Set(dd4.id, "right-up");
rs.Set(dd5.id, "left-up");rs.Set(dd6.id, "right");
rs.Set(dd7.id, "left");rs.Set(dd8.id, "up");
rs.Set(dd9.id, "down");
new Drag(dd1.id);
winid++;}
</script>
</body>
</html>大哥们帮帮忙啊，按创建后只有第一个框可以缩放其余的框的缩放焦点都是无效的，且第一个会控制其余的框的缩放，问题找到了，是因为最后的var rs = new SimpleResize(dd1.id);rs.Set(dd2.id, "right-down");
rs.Set(dd3.id, "left-down");rs.Set(dd4.id, "right-up");
rs.Set(dd5.id, "left-up");rs.Set(dd6.id, "right");
rs.Set(dd7.id, "left");rs.Set(dd8.id, "up");
rs.Set(dd9.id, "down");
new Drag(dd1.id);rs.Set里面的东西，每个框都是一样的，浏览器貌似只识别了第一个框于是全部按照第一个框的行为来控制其它的了，不知道该如何修改，可以使得生成的东西控制自如呢

解决方案 »

  1.   


    如果生成多个框，ID重名了。
    试下把dd2,dd3....改成下面那种格式

    ddXX.id="rRightDown"+winid;
    ddXX.className="rRightDown";    .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
        position:absolute;
        background:#C00;
        width:7px;
        height:7px;
        z-index:5;
        font-size:0;
    }
     
    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
     
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
     
    .jiantou{position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1;}
    .drag{ width:100px; height:60px; top:50px; left:50px;}
      

  2.   

    修改后的代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>拖拉缩放效果</title>
    </head>
     
    <body>
     
    <script>
     
    var isIE = (document.all) ? true : false;
     
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };
     
    var Class = {
        create: function() {
            return function() { this.initialize.apply(this, arguments); }
        }
    }
     
    var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }
     
    var Bind = function(object, fun) {
        return function() {
            return fun.apply(object, arguments);
        }
    }
     
    var BindAsEventListener = function(object, fun) {
        var args = Array.prototype.slice.call(arguments,2);
        //alert(args);
        return function(event) {
            return fun.apply(object, [event || window.event].concat(args));
        }
    }
     
    var CurrentStyle = function(element){
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    }
     
    function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };
     
    function removeEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.removeEventListener) {
            oTarget.removeEventListener(sEventType, fnHandler, false);
        } else if (oTarget.detachEvent) {
            oTarget.detachEvent("on" + sEventType, fnHandler);
        } else { 
            oTarget["on" + sEventType] = null;
        }
    };
     
     
     
    //缩放程序
    var SimpleResize = Class.create();
    SimpleResize.prototype = {
      initialize: function(obj, options) {
        this._obj = $(obj);
         
        //alert(this);
        this._fR = BindAsEventListener(this, this.Resize);
        this._fS = Bind(this, this.Stop);
         
        this._obj.style.position = "absolute";
      },
      //设置触发对象
      Set: function(resize, side) {
        var resize = $(resize), fun;
        if(!resize) return;
        switch (side.toLowerCase()) {
        case "up" :
            fun = this.Up;
            break;
        case "down" :
            fun = this.Down;
            break;
        case "left" :
            fun = this.Left;
            break;
        case "right" :
            fun = this.Right;
            break;
        case "left-up" :
            fun = this.LeftUp;
            break;
        case "right-up" :
            fun = this.RightUp;
            break;
        case "left-down" :
            fun = this.LeftDown;
            break;
        case "right-down" :
        default :
            fun = this.RightDown;
        };
        //alert(resize.id);
        addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));
      },
      //准备缩放
      Start: function(e, fun) {
     
        //防止冒泡(跟拖放配合时设置)
        e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
        //设置执行程序
        this._fun = fun;
         
        this._styleWidth =  this._obj.clientWidth;
        this._styleHeight = this._obj.clientHeight;
        this._styleLeft = this._obj.offsetLeft;
        this._styleTop = this._obj.offsetTop;
         
        this._sideLeft = e.clientX - this._styleWidth;
        this._sideRight = e.clientX + this._styleWidth;
        this._sideUp = e.clientY - this._styleHeight;
        this._sideDown = e.clientY + this._styleHeight;
         
        this._fixLeft = this._styleWidth + this._styleLeft;
        this._fixTop = this._styleHeight + this._styleTop;
         
        addEventHandler(document, "mousemove", this._fR);
        addEventHandler(document, "mouseup", this._fS);
            if(isIE){
            addEventHandler(this._obj, "losecapture", this._fS);
            this._obj.setCapture();
        }else{
            addEventHandler(window, "blur", this._fS);
            e.preventDefault();
        }
      },  
      //缩放
      Resize: function(e) {
        this._fun(e);
        with(this._obj.style){
            width = this._styleWidth + "px"; height = this._styleHeight + "px";
            top = this._styleTop + "px"; left = this._styleLeft + "px";
        }
      },
      //缩放程序
      //上
      Up: function(e) {
       
        this._styleHeight = Math.max(this._sideDown - e.clientY, 0);
        this._styleTop = this._fixTop - this._styleHeight;
      },
      //下
      Down: function(e) {
       
        this._styleHeight = Math.max(e.clientY - this._sideUp, 0);
      },
      //右
      Right: function(e) {
        this._styleWidth = Math.max(e.clientX - this._sideLeft, 0);
      },
      //左
      Left: function(e) {
        this._styleWidth = Math.max(this._sideRight - e.clientX, 0);
        this._styleLeft = this._fixLeft - this._styleWidth;
      },
      //右下
      RightDown: function(e) {
        this.Right(e); this.Down(e);
      },
      //右上
      RightUp: function(e) {
        this.Right(e); this.Up(e);
      },
      //左下
      LeftDown: function(e) {
        this.Left(e); this.Down(e);
      },
      //左上
      LeftUp: function(e) {
        this.Left(e); this.Up(e);
      },
       
        RepairX: function(iWidth, mxWidth) {
        iWidth = this.RepairWidth(iWidth, mxWidth);
        if(this.Scale){
            var iHeight = this.RepairScaleHeight(iWidth);
            if(this.Max && iHeight > this._mxScaleHeight){
                iHeight = this._mxScaleHeight;
                iWidth = this.RepairScaleWidth(iHeight);
            }else if(this.Min && iHeight < this.minHeight){
                var tWidth = this.RepairScaleWidth(this.minHeight);
                if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
            }
            this._styleHeight = iHeight;
            this._styleTop = this._scaleTop - iHeight / 2;
        }
        this._styleWidth = iWidth;
      },
      //垂直方向
      RepairY: function(iHeight, mxHeight) {
        iHeight = this.RepairHeight(iHeight, mxHeight);
        if(this.Scale){
            var iWidth = this.RepairScaleWidth(iHeight);
            if(this.Max && iWidth > this._mxScaleWidth){
                iWidth = this._mxScaleWidth;
                iHeight = this.RepairScaleHeight(iWidth);
            }else if(this.Min && iWidth < this.minWidth){
                var tHeight = this.RepairScaleHeight(this.minWidth);
                if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }
            }
            this._styleWidth = iWidth;
            this._styleLeft = this._scaleLeft - iWidth / 2;
        }
        this._styleHeight = iHeight;
      },
       
      //停止缩放
      Stop: function() {
        removeEventHandler(document, "mousemove", this._fR);
        removeEventHandler(document, "mouseup", this._fS);
           if(isIE){
            removeEventHandler(this._obj, "losecapture", this._fS);
            this._obj.releaseCapture();
        }else{
            removeEventHandler(window, "blur", this._fS);
        }
      
      
      }
     
       
    };
     
    </script>
     <style type="text/css">
    .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
        position:absolute;
        background:#C00;
        width:7px;
        height:7px;
        z-index:5;
        font-size:0;
    }
     
    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
     
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
     
    .jiantou{position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1;}
    .drag{ width:100px; height:60px; top:50px; left:50px;}
    </style>
     
    <div>  <input type="button" value="创建" onclick="createtuodong()">
     
    </div>
     
    <div id="tuodongqun">
     
    </div>
     
     
     
     
    <script>
     
    winid=1;
    i=80;
     
    function createtuodong(){
    var dd1 = document.createElement("div");
     
    dd1.id="dragDiv"+winid.toString();
    dd1.className="drag";
     
    dd1.style.left=(15+i).toString()+"px";
    dd1.style.top=(15+i).toString()+"px";
    i=i+50;
     
    var jiantoudiv = document.createElement("div");
    var jiantoupic = document.createElement("img");
    jiantoupic.className="jiantou";
    //jiantoupic.id="jiantou";
    jiantoupic.src="1.png";
     
    var dd2 = document.createElement("div");
    dd2.id="rRightDown"+winid;
    dd2.className="rRightDown";
    var dd3 = document.createElement("div");
    dd3.id="rLeftDown"+winid;
    dd3.className="rLeftDown";
    var dd4 = document.createElement("div");
    dd4.id="rRightUp"+winid;
    dd4.className="rRightUp";
    var dd5 = document.createElement("div");
    dd5.id="rLeftUp"+winid;
    dd5.className="rLeftUp";
    var dd6 = document.createElement("div");
    dd6.id="rRight"+winid;
    dd6.className="rRight";
    var dd7 = document.createElement("div");
    dd7.id="rLeft"+winid;
    dd7.className="rLeft";
    var dd8 = document.createElement("div");
    dd8.id="rUp"+winid;
    dd8.className="rUp";
    var dd9 = document.createElement("div");
    dd9.id="rDown"+winid;
    dd9.className="rDown";
     
    dd1.appendChild(jiantoudiv);
    jiantoudiv.appendChild(jiantoupic);
    dd1.appendChild(dd2);
    dd1.appendChild(dd3);
    dd1.appendChild(dd4);
    dd1.appendChild(dd5);
    dd1.appendChild(dd6);
    dd1.appendChild(dd7);
    dd1.appendChild(dd8);
    dd1.appendChild(dd9);
     
     
    document.getElementById("tuodongqun").appendChild(dd1);//添加
     
     
     
    var rs = new SimpleResize(dd1.id);
     
    rs.Set(dd2.id, "right-down");
    rs.Set(dd3.id, "left-down");
     
    rs.Set(dd4.id, "right-up");
    rs.Set(dd5.id, "left-up");
     
    rs.Set(dd6.id, "right");
    rs.Set(dd7.id, "left");
     
    rs.Set(dd8.id, "up");
    rs.Set(dd9.id, "down");
     
     
    //new Drag(dd1.id);
    winid++;
     
    }
    </script>
    </body>
    </html>