目錄
回复讨论(解决方案)
首頁 web前端 html教學 在每次创建一个新的dialog和对它进行拖拽和拉伸之后,怎么保存下每个dialog的位置和大小代码如下。_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:02 PM
dialog 位置 創建 大小 拖曳

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);    }
登入後複製

在这个方法里边保存。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

詳細介紹如何在Windows 11上開啟環境變數設定 詳細介紹如何在Windows 11上開啟環境變數設定 Dec 30, 2023 pm 06:07 PM

環境變數功能是系統中的配置程式運行必備工具,但是在最新的win11系統中還有許多的用戶不知道怎麼設置打開,下面就給你們帶來了win11環境變量打開位置詳細介紹,快來一起學習操作一下吧。 win11環境變數在哪:1、先輸入“win+R”,開啟運行框。 2、然後在裡面輸入指令:controlsystem。 3.在開啟的系統資訊介面中,選擇左側選單的「進階系統設定」。 4.隨後在開啟的「系統屬性」視窗選擇下方的「環境變數」選項。 5.最後在開啟的環境變數中,即可依照需求進行相關的設定。

Win11的啟動路徑以及如何開啟它 Win11的啟動路徑以及如何開啟它 Jan 03, 2024 pm 11:13 PM

每個Windows系統都有一個啟動路徑,如果你在其中新增了檔案或軟體,就會在開機的時候打開它。不過不少朋友不知道win11啟動路徑在哪裡,其實我們只要進入C碟的對應資料夾就可以了。 win11啟動路徑:1、雙擊開啟「此電腦」2、直接將此路徑「C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup」貼進路徑方塊。 3.這裡就是win11啟動路徑了,如果我們要開機開啟檔案就可以將檔案放進來。 4.如果你根據這條路徑進不來,可能是被隱藏了。

星穹鐵道克勞克影視樂園摺紙小鳥位置 星穹鐵道克勞克影視樂園摺紙小鳥位置 Mar 27, 2024 pm 11:51 PM

星穹鐵道克勞克影視樂園總共有20隻摺紙小鳥,有很多玩家不知道克勞克影視樂園摺紙小鳥在哪,小編已經把每隻摺紙小鳥位置全部都總結出來了,幫助大家進行尋找,具體內容一起來看看這篇克勞克影視樂園摺紙小鳥位置最新匯總。崩壞星穹鐵道攻略大全星穹鐵道克勞克影視樂園摺紙小鳥位置1、克勞克影視樂園一層2、克勞克影視樂園二層

如何在真我手機上建立資料夾? 如何在真我手機上建立資料夾? Mar 23, 2024 pm 02:30 PM

標題:真我手機新手指南:如何在真我手機上建立資料夾?在現今社會,手機已成為人們生活中不可或缺的工具。而真我手機作為一款備受歡迎的智慧型手機品牌,其簡潔、實用的作業系統備受用戶喜愛。在使用真實我手機的過程中,很多人可能會遇到需要整理手機中的檔案和應用程式的情況,而建立資料夾就是一種有效的方式。本文將介紹如何在真我手機上建立資料夾,幫助使用者更好地管理自己的手機內容。第

如何在GIMP中創造像素藝術 如何在GIMP中創造像素藝術 Feb 19, 2024 pm 03:24 PM

本文將引起您的興趣,如果您有意在Windows上使用GIMP進行像素藝術創作。 GIMP是一款著名的圖形編輯軟體,不僅免費開源,還能幫助使用者輕鬆創造美麗的圖像和設計。除了適用於初學者和專業設計師外,GIMP也可以用於製作像素藝術,這種數位藝術形式是利用像素作為唯一構建塊來進行繪製和創作的。如何在GIMP中建立像素藝術以下是在WindowsPC上使用GIMP建立像素圖片的主要步驟:下載並安裝GIMP,然後啟動應用程式。創造一個新的形象。調整寬度和高度的大小。選擇鉛筆工具。將筆刷類型設定為像素。設定

了解pip安裝包儲存的位置和結構 了解pip安裝包儲存的位置和結構 Jan 18, 2024 am 08:23 AM

深入了解pip安裝的套件存放位置,需要具體程式碼範例pip是Python語言常用的套件管理工具,用於方便安裝、升級和管理Python套件。在使用pip安裝套件時,它會自動從PyPI(Python套件索引)下載對應的套件文件,並將其安裝到指定的位置。那麼,pip安裝的套件究竟存放在哪裡呢?這是很多Python開發者都會遇到的問題。本文將深入探討pip安裝的套件存放位置,並提供

格力+如何創造家庭 格力+如何創造家庭 Mar 01, 2024 pm 12:40 PM

很多朋友表示想知道在格力+軟體裡該怎麼去創建家庭,下面為大家帶來了操作方法,想要了解的朋友和我一起來看看吧。首先,開啟手機上的格力+軟體,並登入。接著,在頁面底部的選項列中,點選最右邊的「我的」選項,即可進入個人帳戶頁面。 2.來到我的頁面後,在“家庭”下方的選項裡有一個“創建家庭”,找到後在它的上面點擊進入。 3.接下來跳到建立家庭的頁面裡,根據提示在輸入框裡輸入要設定的家庭名稱,輸入好後在右上角點選「儲存」按鈕。 4.最後在頁面下方會彈出一個「儲存成功」的提示,代表家庭已經成功創建好了。

如何在VirtualBox中增加磁碟大小[指南] 如何在VirtualBox中增加磁碟大小[指南] Mar 17, 2024 am 10:10 AM

我們經常遇到預定義磁碟大小沒有空間容納更多資料的情況?如果您在稍後階段需要更多的虛擬機器硬碟空間,則必須擴充虛擬硬碟和分割區。在這篇文章中,我們將看到如何在VirtualBox中增加磁碟大小。增加VirtualBox中的磁碟大小重要的是要注意,您可能希望在執行這些操作之前備份您的虛擬硬碟文件,因為總是有可能出錯。有備份總是一個好的做法。然而,該過程通常運作良好,請確保在繼續之前關閉您的機器。有兩種方法可以增加VirtualBox中的磁碟大小。使用圖形使用者介面擴充VirtualBox的磁碟大小使用CL

See all articles