


在每次创建一个新的dialog和对它进行拖拽和拉伸之后,怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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); }
在这个方法里边保存。

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Fungsi pembolehubah persekitaran adalah alat penting untuk menjalankan program konfigurasi dalam sistem Walau bagaimanapun, dalam sistem win11 terkini, masih terdapat ramai pengguna yang tidak tahu bagaimana untuk menetapkan dan membukanya lokasi pembukaan pembolehubah persekitaran win11 Marilah sertai kami. Di manakah pembolehubah persekitaran win11: 1. Mula-mula masukkan "win+R" untuk membuka kotak larian. 2. Kemudian masukkan arahan: controlsystem. 3. Dalam antara muka maklumat sistem yang terbuka, pilih "Tetapan Sistem Lanjutan" dari menu kiri. 4. Kemudian pilih pilihan "Pembolehubah Persekitaran" di bahagian bawah tetingkap "System Properties" yang terbuka. 5. Akhir sekali, dalam pembolehubah persekitaran yang dibuka, anda boleh membuat tetapan yang berkaitan mengikut keperluan anda.

Setiap sistem Windows mempunyai laluan permulaan Jika anda menambah fail atau perisian padanya, ia akan dibuka pada masa but. Walau bagaimanapun, ramai rakan tidak tahu di mana laluan permulaan win11 sebenarnya, kita hanya perlu memasukkan folder yang sepadan pada pemacu C. Laluan permulaan Win11: 1. Klik dua kali untuk membuka "PC ini" 2. Tampal terus laluan "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" ke dalam kotak laluan. 3. Berikut ialah laluan permulaan win11 Jika kita ingin membuka fail selepas boot, kita boleh memasukkan fail tersebut. 4. Jika anda tidak boleh masuk mengikut laluan ini, ia mungkin tersembunyi.

Terdapat sejumlah 20 burung origami di Taman Filem dan Televisyen Croaker di Star Dome Railway Ramai pemain tidak tahu di mana burung origami berada di Taman Filem dan Televisyen Crocker. Editor telah meringkaskan lokasi setiap burung origami untuk membantu semua orang . Carinya, dan lihat ringkasan terkini lokasi burung origami di Taman Filem dan Televisyen Croaker untuk kandungan tertentu. Panduan ke Kereta Api Kubah Bintang Honkai: Burung Origami di Crook Movie Park Lokasi 1, Crook Movie Park Tingkat 1 2 dan Crook Movie Park Tingkat 2 Star Dome Railway

Tajuk: Panduan Pemula Telefon Realme: Bagaimana Membuat Folder pada Telefon Realme? Dalam masyarakat hari ini, telefon bimbit telah menjadi alat yang sangat diperlukan dalam kehidupan manusia. Sebagai jenama telefon pintar popular, Telefon Realme digemari pengguna kerana sistem pengendaliannya yang ringkas dan praktikal. Dalam proses menggunakan telefon Realme, ramai orang mungkin menghadapi situasi di mana mereka perlu mengatur fail dan aplikasi pada telefon mereka, dan mencipta folder ialah cara yang berkesan. Artikel ini akan memperkenalkan cara membuat folder pada telefon Realme untuk membantu pengguna mengurus kandungan telefon mereka dengan lebih baik. Tidak.

Artikel ini akan menarik minat anda jika anda berminat menggunakan GIMP untuk penciptaan seni piksel pada Windows. GIMP ialah perisian penyuntingan grafik terkenal yang bukan sahaja percuma dan sumber terbuka, tetapi juga membantu pengguna mencipta imej dan reka bentuk yang cantik dengan mudah. Selain sesuai untuk pemula dan pereka profesional, GIMP juga boleh digunakan untuk mencipta seni piksel, satu bentuk seni digital yang menggunakan piksel sebagai satu-satunya blok bangunan untuk melukis dan mencipta. Cara Membuat Seni Piksel dalam GIMP Berikut ialah langkah utama untuk mencipta gambar piksel menggunakan GIMP pada PC Windows: Muat turun dan pasang GIMP, kemudian lancarkan aplikasi. Buat imej baharu. Ubah saiz lebar dan tinggi. Pilih alat pensel. Tetapkan jenis berus kepada piksel. sediakan

Untuk mengetahui lebih lanjut tentang lokasi storan pakej yang dipasang oleh pip, anda memerlukan contoh kod khusus Pip ialah alat pengurusan pakej yang biasa digunakan dalam bahasa Python Ia digunakan untuk memasang, meningkatkan dan mengurus pakej Python dengan mudah. Apabila menggunakan pip untuk memasang pakej, ia akan memuat turun fail pakej yang sepadan secara automatik daripada PyPI (Python Package Index) dan memasangnya ke lokasi yang ditentukan. Jadi, di manakah pakej yang dipasang oleh pip disimpan? Ini adalah masalah yang akan dihadapi oleh ramai pembangun Python. Artikel ini akan menyelidiki lokasi pakej yang dipasang oleh pip dan menyediakan

Jika kita akan berada jauh dari komputer untuk masa yang lama, adalah lebih baik untuk menutup komputer untuk melindunginya Jadi di manakah penutupan dalam win11 Sebenarnya, secara umum, buka menu mula dan anda boleh mencari butang tutup di dalamnya. Di mana untuk menutup Windows 11: Jawapan: Dalam butang kuasa menu mula. 1. Mula-mula, kami klik "Logo Windows" pada bar tugas bawah untuk membuka "Menu Mula" 2. Selepas membuka, anda boleh mencari butang "Kuasa" di sudut kanan bawah, seperti yang ditunjukkan dalam rajah. 3. Selepas mengklik butang kuasa, anda akan melihat "Shutdown", klik padanya untuk menutup. 4. Jika komputer tidak dapat dimatikan disebabkan oleh keadaan khusus seperti ranap sistem, anda boleh terus menekan dan menahan "butang kuasa" pada komputer untuk menutup paksa.
![Bagaimana untuk meningkatkan saiz cakera dalam VirtualBox [Panduan]](https://img.php.cn/upload/article/000/887/227/171064142025068.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Kami sering menghadapi situasi di mana saiz cakera yang telah ditetapkan tidak mempunyai ruang untuk lebih banyak data? Jika anda memerlukan lebih banyak ruang cakera keras mesin maya pada peringkat seterusnya, anda mesti mengembangkan cakera keras maya dan sekatan. Dalam siaran ini, kita akan melihat bagaimana untuk meningkatkan saiz cakera dalam VirtualBox. Meningkatkan saiz cakera dalam VirtualBox Adalah penting untuk ambil perhatian bahawa anda mungkin ingin menyandarkan fail cakera keras maya anda sebelum melakukan operasi ini, kerana sentiasa ada kemungkinan berlaku masalah. Ia sentiasa menjadi amalan yang baik untuk mempunyai sandaran. Walau bagaimanapun, proses ini biasanya berfungsi dengan baik, cuma pastikan untuk mematikan mesin anda sebelum meneruskan. Terdapat dua cara untuk meningkatkan saiz cakera dalam VirtualBox. Kembangkan saiz cakera VirtualBox menggunakan GUI menggunakan CL
