Home >Web Front-end >HTML Tutorial >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
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
- WBOYOriginal
- 2016-06-24 12:02:29832browse
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7JS模拟Dialog实现可创建可拖拽拉伸可拖动可关闭的浮动div层6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
.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;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
32d38427aad140eae0694328899c66a6
026c223037cd197563a6100fbfee33e4
64f29cd735fe288cda02d5f81ebdf09716b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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;icb7345114c123cfc27ddf97b15188069
1b206ce7bc23b76b15ec69a6bdb4391b
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188af32b48428a809b51f04d3228cdf461fa
回复讨论(解决方案)
在创建的时候保存一下相关信息，在拖动的时候保存一下相关信息。如果拖动的时候有性能问题，可以在加个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); } 在这个方法里边保存。