社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 在每次创建一个新的dialog和对它进行拖拽和拉伸之后，怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose

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

WBOY
发布： 2016-06-24 12:02:29
原创
823 人浏览过

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>
登录后复制

如何保存每个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);    }
登录后复制

在这个方法里边保存。

相关标签：
dialog 位置 创建 大小 拖拽
来源：php.cn
上一篇：巧用css border_html/css_WEB-ITnose 下一篇：CSS写法，基本语法的问题_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
有没有办法让textarea在调整大小时不显示CSS变换？ 当我要在悬停时设置<textarea>的背景转换时，它成功了。但是，当我尝试调整它的大小时，transition时间仍然有效。这是我的代码，你可以拖动<texta...
来自于 2024-04-03 17:02:11
0
1
245
在 Angular 中创建圆形 SVG 温度拖动器？ 这是我尝试在Angular中创建的圆形拇指拖动器的静态演示。它使用rinkle-dashoffset="-260"设置将拇指/拖动器定位在靠近拇指后面的圆形路径...
来自于 2024-04-03 09:33:29
0
1
376
可拖动 Framer Motion 组件的保留位置 我正在创建一个小部件仪表板，您可以在其中移动小部件，我的目标是在拖动小部件后保留它们的位置，以便在将来的会话中将它们加载到完全相同的位置。这里有一个codesandbox，它说明了...
来自于 2024-03-31 22:29:49
0
1
313
将文本字段添加到用户上传的 PDF 中的拖放方法 请有人向我解释如何像adobesign一样将文本字段拖放到上传的PDF中。我正在尝试使用DocuSignAPI制作一个React应用程序，我需要在PDF中添加字段。
来自于 2024-03-31 09:46:21
0
1
276
在状态中重新排序数组 我使用zustand创建一个带有待办事项数组的全局状态，我有添加、删除和切换每个待办事项完成/撤消的功能。我还使用DndKit拖放每个ToDo组件并在全局上下文中对它们重新排序，为...
来自于 2024-03-30 14:44:42
0
1
278
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板