After each time you create a new dialog and drag and stretch it, the code for how to save the position and size of each dialog is as follows. _html/css_WEB-ITnose

    
    
    
    
    
    
    
    

    <script> <br>     var z=1,i=1,left=10 <br>     var isIE = (document.all) ? true : false; <br>     var $ = function (id) { <br>     return  document.getElementById(id); <br>     }; <br>     var Extend = function(destination, source) { <br>     for (var property in source) { <br>     destination[property] = source[property]; <br>     } <br>     } <br>     var Bind = function(object, fun,args) { <br>     return function() { <br>     return fun.apply(object,args||[]); <br>     } <br>     } <br>     var BindAsEventListener = function(object, fun) { <br>     var args = Array.prototype.slice.call(arguments).slice(2); <br>     return function(event) { <br>     return fun.apply(object, [event || window.event].concat(args)); <br>     } <br>     } <br>     var CurrentStyle = function(element){ <br>     return element.currentStyle || document.defaultView.getComputedStyle(element, null); <br>     } <br>     function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element}; <br>     function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on"   e,fn)}; <br>     function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on"   e,fn)}; <br>     var Class = function(properties){ <br>     var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; <br>     _class.prototype = properties; <br>     return _class; <br>     }; <br>     var Dialog = new Class({ <br>     options:{ <br>     Width       : 400, <br>     Height      : 400, <br>     Left        : 100, <br>     Top         : 100, <br>     Titleheight : 26, <br>     Minwidth    : 200, <br>     Minheight   : 200, <br>     CancelIco   : true, <br>     ResizeIco   : false, <br>     Info        : "新闻标题", <br>     Content     : "无内容", <br>     Zindex      : 2 <br>     }, <br>     initialize:function(options){ <br>     this._dragobj   = null; <br>     this._resize    = null; <br>     this._cancel    = null; <br>     this._body      = null; <br>     this._x         = 0; <br>     this._y         = 0; <br>     this._fM        = BindAsEventListener(this, this.Move); <br>     this._fS        = Bind(this, this.Stop); <br>    this._isdrag    = null; <br>     this._Css       = null; <br>     this.Width      = this.options.Width; <br>     this.Height     = this.options.Height; <br>     this.Left       = this.options.Left; <br>     this.Top        = this.options.Top; <br>     this.CancelIco  = this.options.CancelIco; <br>     this.Info       = this.options.Info; <br>     this.Content    = this.options.Content; <br>     this.Minwidth   = this.options.Minwidth; <br>     this.Minheight  = this.options.Minheight; <br>     this.Titleheight= this.options.Titleheight; <br>     this.Zindex     = this.options.Zindex; <br>     Extend(this,options); <br>     Dialog.Zindex   = this.Zindex <br>     //构造dialog <br>     var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom']; <br>     for(var i = 0;i<obj.length;i ) <br />     { obj[i]=create('div',null,function(elm){elm.className = obj[i];}); } <br />     obj[2].innerHTML = this.Info; <br />     obj[4].innerHTML = this.Content; <br />     obj[1].appendChild(obj[2]); <br />     obj[1].appendChild(obj[3]); <br />     obj[0].appendChild(obj[1]); <br />     obj[0].appendChild(obj[4]); <br />     obj[0].appendChild(obj[5]); <br />     document.body.appendChild(obj[0]); <br />     this._dragobj = obj[0]; <br />     this._resize  = obj[5]; <br />     this._cancel  = obj[3]; <br />     this._body    = obj[4]; <br />     ///o,x1,x2 <br />     ////设置Dialog的长 宽 ,left ,top <br />     with(this._dragobj.style){ <br />     height = this.Height   "px";top = this.Top   "px";width = this.Width  "px";left = this.Left   "px";zIndex = this.Zindex; <br />     } <br />     this._body.style.height    = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2 'px'; <br />     ///////////////////////////////////////////////////////////////////////////////   添加事件 <br />     addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true)); <br />     addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px'])); <br />     addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px'])); <br />     addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear)); <br />     addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble)); <br />     addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false)); <br />     }, <br />     Disappear:function(e){ <br />     this.Cancelbubble(e); <br />     document.body.removeChild(this._dragobj); <br />     }, <br />     Cancelbubble:function(e){ <br />     this._dragobj.style.zIndex =  Dialog.Zindex; <br />     document.all?(e.cancelBubble=true):(e.stopPropagation()) <br />     }, <br />     Changebg:function(o,x1,x2){ <br />     o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1; <br />     }, <br />     Start:function(e,isdrag){ <br />    if(!isdrag){this.Cancelbubble(e);} <br />     this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"} <br />     this._dragobj.style.zIndex =  Dialog.Zindex; <br />     this._isdrag = isdrag; <br />     this._x      = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ; <br />     this._y      = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0); <br />     if(isIE) <br />     { <br />     addListener(this._dragobj, "losecapture", this._fS); <br />     this._dragobj.setCapture(); <br />     } <br />     else <br />     { <br />     e.preventDefault(); <br />     addListener(window, "blur", this._fS); <br />     } <br />     addListener(document,'mousemove',this._fM) <br />     addListener(document,'mouseup',this._fS) <br />     }, <br />     Move:function(e){ <br />     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); <br />     var i_x = e.clientX - this._x, i_y = e.clientY - this._y; <br />     this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth)) 'px'; <br />     this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight)) 'px' <br />     if(!this._isdrag) <br />     this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft) 'px'; <br />     }, <br />     Stop:function(){ <br />     removeListener(document,'mousemove',this._fM); <br />     removeListener(document,'mouseup',this._fS); <br />     if(isIE) <br />     { <br />     removeListener(this._dragobj, "losecapture", this._fS); <br />     this._dragobj.releaseCapture(); <br />     } <br />     else <br />     { <br />     removeListener(window, "blur", this._fS); <br />     }; <br />     } <br />     }) <br />     new Dialog({Width:400,Height:400,Left:700,Top:100}); <br />     new Dialog({Info:"欢迎",Content:"欢迎光临 "}); <br />     function creat(){ <br />     new Dialog({Info:title="标题" i,Left:300 left,Top:300 left,Content:'内容' i,Zindex:( Dialog.Zindex)}); <br />     i ;left  =10; <br /> var width=Left; <br />     } <br />     </script>
<%=width%>
    
    
    

---

    

回复讨论(解决方案)

在创建的时候保存一下相关信息，在拖动的时候保存一下相关信息。如果拖动的时候有性能问题，可以在加个setTimeout进行延迟处理。时间有限，只能修改到这：

<!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 charset="utf-8"/>    <title>JS模拟Dialog实现可创建可拖拽拉伸可拖动可关闭的浮动div层</title>    <style type="text/css">        .dialogcontainter{ height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px; }        .dialogtitle{ height:26px; width:auto; background-image:url(/imagesforcode/201209/103444839_p.gif); }        .dialogtitleinfo{ float:left; height:20px; margin-top:2px; margin-left:10px; line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }        .dialogtitleico{ float:right; height:20px; width:21px; margin-top:2px; margin-right:5px; text-align:center; line-height:20px; vertical-align:middle; background-image:url(/imagesforcode/201209/103419495_p.gif); background-position:-21px 0px }        .dialogbody{ padding:10px; width:auto; background-color:#FFFFFF; }        .dialogbottom{            bottom:1px; right:1px; cursor:nw-resize;            position:absolute;            background-image:url(imagesforcode/201209/103419495_p.gif);            background-position:-42px -10px;            width:10px;            height:10px;            font-size:0; }    </style></head><body><input value="创建" type="button" onclick="creat()"/><div id='aa'></div><script>    var z = 1, i = 1, left = 10    var isIE = (document.all) ? true : false;    var $ = function (id) {        return  document.getElementById(id);    };    var Extend = function (destination, source) {        for (var property in source) {            destination[property] = source[property];        }    }    var Bind = function (object, fun, args) {        return function () {            return fun.apply(object, args || []);        }    }    var BindAsEventListener = function (object, fun) {        var args = Array.prototype.slice.call(arguments).slice(2);        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 create(elm, parent, fn) {        var element = document.createElement(elm);        fn && fn(element);        parent && parent.appendChild(element);        return element    }    function addListener(element, e, fn) {        element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)    }    function removeListener(element, e, fn) {        element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)    }    var Class = function (properties) {        var _class = function () {            return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;        };        _class.prototype = properties;        return _class;    };    var Dialog = new Class({        options : {            Width : 400,            Height : 400,            Left : 100,            Top : 100,            Titleheight : 26,            Minwidth : 200,            Minheight : 200,            CancelIco : true,            ResizeIco : false,            Info : "新闻标题",            Content : "无内容",            Zindex : 2        },        initialize : function (options) {            this._dragobj = null;            this._resize = null;            this._cancel = null;            this._body = null;            this._x = 0;            this._y = 0;            this._fM = BindAsEventListener(this, this.Move);            this._fS = Bind(this, this.Stop);            this._isdrag = null;            this._Css = null;            this.Width = this.options.Width;            this.Height = this.options.Height;            this.Left = this.options.Left;            this.Top = this.options.Top;            this.CancelIco = this.options.CancelIco;            this.Info = this.options.Info;            this.Content = this.options.Content;            this.Minwidth = this.options.Minwidth;            this.Minheight = this.options.Minheight;            this.Titleheight = this.options.Titleheight;            this.Zindex = this.options.Zindex;            Extend(this, options);            Dialog.Zindex = this.Zindex            //构造dialog            var obj = ['dialogcontainter', 'dialogtitle', 'dialogtitleinfo', 'dialogtitleico', 'dialogbody', 'dialogbottom'];            for (var i = 0; i < obj.length; i++) {                obj[i] = create('div', null, function (elm) {                    elm.className = obj[i];                });            }            obj[2].innerHTML = this.Info;            obj[4].innerHTML = this.Content;            obj[1].appendChild(obj[2]);            obj[1].appendChild(obj[3]);            obj[0].appendChild(obj[1]);            obj[0].appendChild(obj[4]);            obj[0].appendChild(obj[5]);            obj[0].id = 'dialog' + this.Zindex;            document.body.appendChild(obj[0]);            this._dragobj = obj[0];            this._resize = obj[5];            this._cancel = obj[3];            this._body = obj[4];            ///o,x1,x2            ////设置Dialog的长 宽 ,left ,top            with (this._dragobj.style) {                height = this.Height + "px";                top = this.Top + "px";                width = this.Width + "px";                left = this.Left + "px";                zIndex = this.Zindex;            }            this._body.style.height = this.Height - this.Titleheight - parseInt(CurrentStyle(this._body).paddingLeft) * 2 + 'px';            ///////////////////////////////////////////////////////////////////////////////   添加事件            addListener(this._dragobj, 'mousedown', BindAsEventListener(this, this.Start, true));            addListener(this._cancel, 'mouseover', Bind(this, this.Changebg, [this._cancel, '0px 0px', '-21px 0px']));            addListener(this._cancel, 'mouseout', Bind(this, this.Changebg, [this._cancel, '0px 0px', '-21px 0px']));            addListener(this._cancel, 'mousedown', BindAsEventListener(this, this.Disappear));            addListener(this._body, 'mousedown', BindAsEventListener(this, this.Cancelbubble));            addListener(this._resize, 'mousedown', BindAsEventListener(this, this.Start, false));        },        Disappear : function (e) {            this.Cancelbubble(e);            document.body.removeChild(this._dragobj);        },        Cancelbubble : function (e) {            this._dragobj.style.zIndex = ++Dialog.Zindex;            document.all ? (e.cancelBubble = true) : (e.stopPropagation())        },        Changebg : function (o, x1, x2) {            o.style.backgroundPosition = (o.style.backgroundPosition == x1) ? x2 : x1;        },        Start : function (e, isdrag) {            if (!isdrag) {                this.Cancelbubble(e);            }            this._Css = isdrag ? {x : "left", y : "top"} : {x : "width", y : "height"}            this._dragobj.style.zIndex = ++Dialog.Zindex;            this._isdrag = isdrag;            this._x = isdrag ? (e.clientX - this._dragobj.offsetLeft || 0) : (this._dragobj.offsetLeft || 0);            this._y = isdrag ? (e.clientY - this._dragobj.offsetTop || 0) : (this._dragobj.offsetTop || 0);            if (isIE) {                addListener(this._dragobj, "losecapture", this._fS);                this._dragobj.setCapture();            } else {                e.preventDefault();                addListener(window, "blur", this._fS);            }            addListener(document, 'mousemove', this._fM)            addListener(document, 'mouseup', this._fS)        },        Move : function (e) {            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();            var i_x = e.clientX - this._x, i_y = e.clientY - this._y;            this._dragobj.style[this._Css.x] = (this._isdrag ? Math.max(i_x, 0) : Math.max(i_x, this.Minwidth)) + 'px';            this._dragobj.style[this._Css.y] = (this._isdrag ? Math.max(i_y, 0) : Math.max(i_y, this.Minheight)) + 'px'            if (!this._isdrag)                this._body.style.height = Math.max(i_y - this.Titleheight, this.Minheight - this.Titleheight) - 2 * parseInt(CurrentStyle(this._body).paddingLeft) + 'px';            savePos(this._dragobj.id);        },        Stop : function () {            removeListener(document, 'mousemove', this._fM);            removeListener(document, 'mouseup', this._fS);            if (isIE) {                removeListener(this._dragobj, "losecapture", this._fS);                this._dragobj.releaseCapture();            } else {                removeListener(window, "blur", this._fS);            }        }    });    var a = new Dialog({Width : 400, Height : 400, Left : 700, Top : 100});    new Dialog({Info : "欢迎", Content : "欢迎光临 "});    function creat() {        var a = new Dialog({Info : title = "标题" + i, Left : 300 + left, Top : 300 + left, Content : '内容' + i, Zindex : (++Dialog.Zindex)});        savePos(a._dragobj.id);        i++;        left += 10;    }    function savePos(obj){//        var aid = a._dragobj.id;        var adig = $(obj).style;        var b = {id : obj, w : adig.width, h : adig.height, t: adig.top, l : adig.left, z : adig.zIndex };        console.dir(b);    }</script><%=width%></body></html>

如何保存每个dialog的最后状态呢

如何保存每个dialog的最后状态呢

function savePos(obj){//        var aid = a._dragobj.id;        var adig = $(obj).style;        var b = {id : obj, w : adig.width, h : adig.height, t: adig.top, l : adig.left, z : adig.zIndex };        console.dir(b);    }

在这个方法里边保存。