javascript-Drag and drop

Css:WinMould.css

/* form template */.win-mould {position:absolute; top:0px; left: -10000px; zoom:1; z-index:900000; overflow:hidden; display:no Ne}.win-mould. win-mask {width:100%; height:100%; background: #293541; position:absolute; left:0px; top:0px; filter : Alpha (OPACITY=50); Opacity:. 5; Z-index:1; _z-index:999; }.win-mould. win-content {background: #fff; position:relative; left:0px; top:0px; z-index:2;}. Win-content. win-html {position:relative; border:1px solid #fff; *zoom:1;}. Win-content. win-html:after {content: ' clear '; clear:both; display:block; height:0px; overflow:hidden; visibility:hi Dden; }.win-content. win-html iframe {display:block;}. Win-content. win-iframe {width:100%; height:100%; background: #fff; Filter:alpha (opacity=0); opacity:0; top:0px; lef t:0px; z-index:1000; Position:absolute; Display:none; }.win-content. win-tit {background: #293541; height:35px; cursor:move; overflow:hidden; box-shadow:2px 0px 5px #888; }.win-tit. win-close {width:21px; height:21px; Overflow:hidden; Display:block; Background: #293541 URL (/images/newcloes.png) no-repeat 3px 3px; Float:right; margin:6px 6px 0px 0px; _display:inline; border:1px solid #707274; }.win-tit. win-close:hover {background-color: #151c22;}. tit-text {line-height:35px; text-indent:10px; padding:0px; margin:0px; color: #fff; float:left; font-family: ' Micros Oft Yahei '; font-size:17px; letter-spacing:1px; }.win-mask2 {width:100%; height:100%; position:absolute; left:0px; top:0px;-webkit-user-select:none;-moz-user-sel Ect:none; }

Js:WindowForm.js

(Function (W, $) {function loadcss (URL) {var s = document.createelement ("link");        S.href = URL;        S.rel = "stylesheet";        S.type = "Text/css";    document.getElementsByTagName ("Head") [0].appendchild (s);    } loadcss ('/css/winmould.css '); W.WF = {winform:function (obj) {return new WinForm ({tit:obj.tit, $dom                : obj. $dom, html:obj.html, W:OBJ.W, Fn:function (FN) {Obj.fn (FN);},        Fn2:function () {obj.fn2 ();}, h:obj.h});                 }} w.wf2 = {winform:function (obj) {var newobj = new WinForm2 ({$dom: obj. $dom,             W:OBJ.W, Fn:function (FN) {Obj.fn (FN);}, Fn2:function () {obj.fn2 ();}            });            Newobj.load ();        return newobj;    }} var titbox_height = 35; Pop-up form var WinForm = function(obj) {this._$mask = ". Win-mask";//Mask Layer This._$p_box = ". Win-mould";//box layer this. $z _box = obj. $dom//". Shelt ER ";//Inclusive Layer This._$p_box_mask =". Win-mask2 ";//internal matte layer this.htmltemp = obj.html;//;//inclusive HTML This.htmlwin = ' <div class= ' Win-mask "style=" Width:100%;height:100%;background: #000;p osition:absolute;z-index:7000;top:0px; Left:0px;opacity:0.45;filter:alpha (opacity=45);d isplay:none; " ></div><div class= "win-mould" ><div class= "win-content" ><div class= "Win-tit" ><p class = "Tit-text" style= "Float:left" ></p><a href= "javascript:void (0)" class= "Win-close" ></a></ Div><div class= "win-html" >{$html}<div class= "Win-iframe" ></div></div></div>< Div class= "Clear" ></div><div class= "Win-mask2" onselectstart= "return false" style= "width:100%; height:100%;p Osition:absolute; left:0px; top:0px; -webkit-user-select:none; -moz-user-select:none; "></div></div>';//boxhtml this.children_w = obj.w//380;//nesting width This.children_h = obj.h;//nesting height This._p_border_w = 1;/        /box Border this._p_maring_w = 0;//box margin This._p_paddint_w = 0;//box inner margin this._pheight = 0;//recording window height        this._pwidth = 0;    This.fn = obj.fn;//callback function this.fn_close = Obj.fn2;//function () {};//close function this.tit = Obj.tit;            } Winform.prototype = {//Initialize Init:function () {var ts = this;            var htmlall = Ts.htmlwin.replace (' {$html} ', ts.htmltemp);            $ ("Body"). Append (Htmlall);            Ts._$mask = $ (ts._$mask);            Ts._$p_box = $ (ts._$p_box);            ts. $z _box = $ (ts. $z _box);            Ts._$p_box_mask = $ (ts._$p_box_mask);                $ (". Win-close"). Click (function (e) {e.preventdefault ();                E.stoppropagation ();                    Ts._$p_box.animate ({margintop: -1000}, +, ' swing ', function () { Ts.Hide_box ();//Eliminate Box ts.fn_close ();//execute Close function});            }). MouseDown (function (e) {e.stoppropagation ();            });            $ (". Tit-text"). Text (ts.tit);        Ts.css ();            },//Auto-adjust css:function () {var ts = this;            Ts._$p_box.show ();//Ts._pwidth = Ts.children_w + ts._p_maring_w * 2 + ts._p_border_w * 2;            ts._pheight = ts. $z _box.outerheight (TRUE) + ts._p_maring_w * 2 + ts._p_border_w * 2 + titbox_height;            Ts._$p_box.width (ts._pwidth). Height (ts._pheight);//set high width;            Ts._$p_box_mask.width (ts._pwidth). Height (ts._pheight);//set high width;        Ts.left_top ();            },//Destroy Container Hide_box:function (FN) {var ts = this;            TS.ADD_FN = null;            Ts._$p_box.hide ();//Ts._$mask.hide ();//Ts._$p_box.remove ();            Ts._$mask.remove (); if (typeof fn = = ' function ') {fn ();           }},//Auto Center left_top:function () {var ts = this; var height_1 = Document.documentElement.scrollHeight | | document.body.scrollheight;//content height var clheight = document.documentElement.clientHeight | | Document.body.clientHeight;                Current visible Height if (height_1 < clheight) {//When the content height is less than the visible height height_1 = clheight;            Ts._$mask.height (height_1);//Set matte layer Height} else {ts._$mask.height (height_1); } var _width = Document.documentElement.scrollWidth | |            Document.body.scrollWidth; var _width2 = Document.documentElement.clientWidth | |            Document.body.clientWidth;                if (_width2 < _width) {//when the visible width is less than the content width ts._$mask.width (_width);//Set matte layer height} else { Ts._$mask.css ("width", "100%");//Set matte layer width} var _top = Document.documentElement.scrollT Op | | Document.body.scrollTop; //Current scrollbar scroll height var h1 = ts._pheight;            var w1 = ts._pwidth;                if (H1 > Clheight) {//when the visible height is too low, position:absolute if (height_1 <= H1) Ts._$mask.height (H1);                Ts._$p_box.css ({"position": "Absolute", "top": _top + "px", "left": _WIDTH/2-(W1/2) + "px"}); if (H1 < height_1) {if ((H1 + _top) > height_1) {ts._$p_box.css ({"Pos                    Ition ":" Absolute "," top ": Height_1-h1 +" px "," left ": _WIDTH/2-(W1/2) +" px "}); }} else {ts._$p_box.css ({"position": "Absolute", "top": 0 + "px", "lef                T ": _WIDTH/2-(W1/2) +" px "});  }} else {if (H1 > Height_1) {//When the content height is less than the height of the popup window Ts._$p_box.css ({ "Position": "Absolute", "top": _top + "px", "left": _WIDTH/2-(W1/2) + "px"})} else {TS. _$p_box.css ({"position": "Absolute", "Top": (CLHEIGHT/2-H1/2) + _top + "px", "left": _WIDTH/2-(W1/2) + "px"                });        }} ts.show ();            },//Draw display show:function () {var ts = this;            Ts._$p_box.css ({"Margin-top": " -1000px"});            Ts._$p_box.animate ({margintop:0}, +, ' swing ');            Ts._$mask.show ();//Ts.fn.call (TS, function () {ts.hide_box ();//Return close Window method});        TS.ADD_FN ();            }, Add_fn:function () {var movethis = this;            Dra_list_win.config.dom = $ (Movethis._$p_box) [0];            DRA_LIST_WIN.CONFIG.DOM1 = $ ("div.win-tit") [0];            DRA_LIST_WIN.CONFIG.DOMW = $ (movethis._$p_box) [0].scrollwidth;            Dra_list_win.config.domh = $ (movethis._$p_box) [0].scrollheight;        Dra_list_win.init (); }, Un_end:function () {}}//already has a form showing Var winfOrm2 = function (obj) {this._$mask1 = ". Win-mask";//Mask Layer This._$mask = ". Win-mask";//Matte Layer This._$p_box        = ". Win-mould";//box layer this. $z _box = obj. $dom//". Shelter";//Inclusive Layer This._$p_box_mask = ". Win-mask2";//inner matte layer THIS.HTMLTEMP = obj.html;//;//inclusive html This.htmlwin = ' <div class= ' win-mask ' style= ' Width:100%;height:100%;bac Kground: #000;p osition:absolute;z-index:7000;top:0px;left:0px;opacity:0.45;filter:alpha (opacity=45);d isplay: none; " ></div> ';//boxhtml this.children_w = obj.w//380;//nesting width This.children_h = obj.h;//nesting height this._ P_border_w = 1;//box Border this._p_maring_w = 0;//box margin This._p_paddint_w = 0;//box inner margin this._pheight = 0;        Ji Lu window Height this._pwidth = 0;    This.fn = obj.fn;//callback function this.fn_close = Obj.fn2;//function () {};//close function this.tit = Obj.tit;            } Winform2.prototype = {//Initialize Load:function () {var ts = this; $ (". Win-close"). Click(function (e) {ts._$p_box.animate ({margintop: -1000}, +, ' swing ', Fu            Nction () {ts.hide_box ();//Eliminate Box ts.fn_close ();//execute Close function});            }). MouseDown (function (e) {e.stoppropagation ();        });            },//Initialize Pop_up:function () {var ts = this;            var htmlall = Ts.htmlwin;            $ ("Body"). Append (Htmlall);            Ts._$mask = $ (TS._$MASK1);            Ts._$p_box = $ (ts._$p_box);            ts. $z _box = $ (ts. $z _box);        Ts.css ();            },//Auto-adjust css:function () {var ts = this;            Ts._$p_box.show ();            Ts.children_w=ts. $z _box.outerwidth (True) >ts.children_w?ts. $z _box.outerwidth (true): Ts.children_w;            Ts._pwidth = Ts.children_w + ts._p_maring_w * 2 + ts._p_border_w * 2; ts._pheight = ts. $z _box.outerheight (TRUE) + ts._p_maring_w * 2 + ts._p_border_w * 2 + titbox_height;            Ts._$p_box.width (ts._pwidth). Height (ts._pheight);//set high width;        Ts.left_top ();            },//Destroy Container Hide_box:function (FN) {var ts = this;            Ts._$mask.hide ();            Ts._$mask.remove ();            if (typeof fn = = ' function ') {fn ();            }},//Auto Center left_top:function () {var ts = this; var height_1 = Document.documentElement.scrollHeight | | document.body.scrollheight;//content height var clheight = document.documentElement.clientHeight | | Document.body.clientHeight;                Current visible Height if (height_1 < clheight) {//When the content height is less than the visible height height_1 = clheight;            Ts._$mask.height (height_1);//Set matte layer Height} else {ts._$mask.height (height_1); } var _width = Document.documentElement.scrollWidth | |            Document.body.scrollWidth; var _width2 = document.documentElement.clientWidth | |            Document.body.clientWidth;                if (_width2 < _width) {//when the visible width is less than the content width ts._$mask.width (_width);//Set matte layer height} else { Ts._$mask.css ("width", "100%");//Set matte layer width} var _top = Document.documentElement.scrollT Op | | Document.body.scrollTop;            Current scrollbar scroll height var h1 = ts._pheight;            var w1 = ts._pwidth;                if (H1 > Clheight) {//when the visible height is too low, position:absolute if (height_1 <= H1) Ts._$mask.height (H1);                Ts._$p_box.css ({"position": "Absolute", "top": _top + "px", "left": _WIDTH/2-(W1/2) + "px"}); if (H1 < height_1) {if ((H1 + _top) > height_1) {ts._$p_box.css ({"Pos                    Ition ":" Absolute "," top ": Height_1-h1 +" px "," left ": _WIDTH/2-(W1/2) +" px "}); }} else {ts._$p_box.css ({"position": "Absolute", "top": 0 + "px", "Left": _WIDTH/2-(W1/2) + "px"});  }} else {if (H1 > Height_1) {//When the content height is less than the height of the popup window Ts._$p_box.css ({ "Position": "Absolute", "top": _top + "px", "left": _WIDTH/2-(W1/2) + "px"})} else  {ts._$p_box.css ({"position": "Absolute", "Top": (CLHEIGHT/2-H1/2) + _top + "px", "left": _width                /2-(W1/2) + "px"});        }} ts.show ();            },//Draw display show:function () {var ts = this;            Ts._$p_box.css ({"Margin-top": " -1000px"});            Ts._$p_box.animate ({margintop:0}, +, ' swing ');            Ts._$mask.show ();            Ts.fn.call (ts, function () {ts.hide_box ();            });        TS.ADD_FN ();            }, Add_fn:function () {var movethis = this;       Dra_list_win.config.dom = $ (Movethis._$p_box) [0];     DRA_LIST_WIN.CONFIG.DOM1 = $ ("div.win-tit") [0];            DRA_LIST_WIN.CONFIG.DOMW = $ (movethis._$p_box) [0].scrollwidth;            Dra_list_win.config.domh = $ (movethis._$p_box) [0].scrollheight;        Dra_list_win.init ();            }, Unload:function () {var ts = this; Ts._$p_box.animate ({margintop: -1000}, +, ' swing ', function () {Ts.hide_box (        );//Eliminate Box ts.fn_close ();//execute Close function}); }}///drag var Dra_list_win = {//Initialize config: {dom: ',//document.getElementById ("Draft ing "),//drag-and-drop container dom1: ',//document.getElementById (" Dramove "),//drag Dom domw:0,//Document.getelementby Id ("Drafting"). ScrollWidth, domh:0,//document.getElementById ("Drafting"). ScrollHeight, Startleft: 0,//start left position starttop:0,//start top position endleft:0,//end left position endtop:0,//end top position x : 0,//Mouse Relativewindow x-coordinate y:0,//mouse relative window y-coordinate clientx:0,//start mouse position clienty:0//start mouse position}, Clearselec T:window.getselection? function () {window.getselection (). Removeallranges ();}: Function () {document.selection.empty ();},//clear User style selected/            /Event Binding init:function () {var ts = this;                Ts.config.dom1.onmousedown = function (e) {$ (". Win-iframe"). Show (); Ts.config.startleft = ts.config.dom.offsetleft;//Prevents other functions from changing position ts.config.starttop = ts.config.dom.offsettop;//                Prevent other functions from changing position ts.config.domw = Ts.config.dom.scrollWidth;                Ts.config.domh = Ts.config.dom.scrollHeight; E = e | |                window.event;                Ts.config.clientX = E.clientx;                Ts.config.clientY = E.clienty;                ts.config.x = Ts.config.clientx-ts.config.startleft;                Ts.config.y = Ts.config.clienty-ts.config.starttop; Set the capture range if (ts.config.dom.setCapture) {ts.config.dom.setCapture (); } else {if (window.captureevents) {window.captureevents (event.m Ousemove |                Event.mouseup)}} document.body.style.MozUserSelect = "None";                Document.onselectstart = function () {return false;};                Document.onmousemove = function (e) {Ts.movestart (e | | window.event);                    } document.onmouseup = function (e) {$ (". Win-iframe"). Hide ();                Ts.moveend (E | | | window.event);            } if (Navigator.userAgent.indexOf (' Firefox ') >= 0) {return false;}        };            }, Movestart:function (e) {var ts = this; E = e | |            window.event; var x = ts.config.clientx-e.clientx;//x moving distance var y = ts.config.clienty-e.clienty;Y moving distance ts.config.endleft = ts.config.startleft-x;            Ts.config.endtop = ts.config.starttop-y;            document.getElementById ("span"). InnerText = Ts.config.endleft + "," + ts.config.endtop; var height_1 = Document.documentElement.scrollHeight | | document.body.scrollheight;//content height var clienth = document.documentElement.clientHeight | | Document.body.clientHeight;            Current visible height if (height_1 > Clienth) {//When the content height is less than the visible height clienth = height_1; } var _width = Document.documentElement.scrollWidth | |            Document.body.scrollWidth; var clientw = Document.documentElement.clientWidth | |            Document.body.clientWidth;            if (_width > clientw) {clientw = _width; } if ((Ts.config.endleft + ts.config.domw) >= clientw) {ts.config.endleft = Clientw-ts.con            FIG.DOMW; } if ((Ts.config.endtop + ts.config.domh) >= clienth) {ts.config.endtop = Clienth-ts.config.domh; } ts.config.endleft = Ts.config.endleft <= 0?            0:ts.config.endleft; Ts.config.endtop = ts.config.endtop <= 0?            0:ts.config.endtop;            Ts.config.dom.style.left = ts.config.endleft + "px";            Ts.config.dom.style.top = ts.config.endtop + "px"; E.preventdefault?            E.preventdefault (): E.returnvalue = false;        return false;            }, Moveend:function (e) {e = e | | window.event;            Set Capture range var ts = this;            if (ts.config.dom.setCapture) {ts.config.dom.releaseCapture (); } else {if (window.captureevents) {window.releaseevents (Event.mousemove | E Vent.            MOUSEUP)}} Document.onselectstart = function () {return true;};            Document.body.style.MozUserSelect = ""; Ts.config.startleft =ts.config.endleft;//record end left position ts.config.starttop = ts.config.endtop;//record end top position Document.onmousemov            e = null;            Document.onmouseup = null;        return false; }}) (window, $);////System form Tips

Use:

var Winformbox = wf2.winform ({    $dom: '. Add-company ',    fn:function (FN) {},//executed after the event    Fn2:function () {},// Event executed at the end    w:1173});
Call 1
WINFORMBOX.POP_UP ();//Display Form

Call 2
Winformbox.unload ();//close form//Clear form

　　

javascript-Drag and drop