Heim > Web-Frontend > HTML-Tutorial > 在每次创建一个新的dialog和对它进行拖拽和拉伸之后,怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose

在每次创建一个新的dialog和对它进行拖拽和拉伸之后,怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:02:29
Original
831 Leute haben es durchsucht

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    


    JS模拟Dialog实现可创建可拖拽拉伸可拖动可关闭的浮动div层
    
    
    
    
    

    <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>

    
    
    



    


回复讨论(解决方案)

在创建的时候保存一下相关信息,在拖动的时候保存一下相关信息。如果拖动的时候有性能问题,可以在加个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>
Nach dem Login kopieren

如何保存每个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);    }
Nach dem Login kopieren

在这个方法里边保存。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage