masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 在每次创建一个新的dialog和对它进行拖拽和拉伸之后，怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose

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

WBOY
Lepaskan： 2016-06-24 12:02:29
asal
824 orang telah melayarinya

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>
Salin selepas log masuk

如何保存每个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);    }
Salin selepas log masuk

在这个方法里边保存。

Label berkaitan：
dialog Lokasi cipta saiz 拖拽
sumber：php.cn
Artikel sebelumnya：巧用css border_html/css_WEB-ITnose Artikel seterusnya：CSS写法，基本语法的问题_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Adakah terdapat cara untuk membuat textarea tidak menunjukkan perubahan CSS apabila diubah saiznya? Apabila saya mahu menetapkan peralihan latar belakang <textarea> pada tuding, ia ber...
daripada 2024-04-03 17:02:11
0
1
245
Buat penyeret suhu SVG bulat dalam Angular? Berikut ialah demonstrasi statik penyeret ibu jari bulat yang saya cuba buat dalam Angular...
daripada 2024-04-03 09:33:29
0
1
376
Kedudukan terpelihara untuk komponen Framer Motion yang boleh diseret Saya sedang mencipta papan pemuka widget di mana anda boleh mengalihkan widget, matlamat s...
daripada 2024-03-31 22:29:49
0
1
313
Kaedah seret dan lepas untuk menambah medan teks pada PDF yang dimuat naik pengguna Tolong seseorang menerangkan kepada saya cara menyeret dan melepaskan medan teks ke dalam ...
daripada 2024-03-31 09:46:21
0
1
276
Susun semula tatasusunan dalam keadaan Saya menggunakan zustand untuk mencipta keadaan global dengan pelbagai item tugasan, dan s...
daripada 2024-03-30 14:44:42
0
1
278
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan