Section 135th, JavaScript, Packaging Library--Drag and drop

JavaScript, Packaging Library--drag-and-drop

1 new drag-and- drop methods for package Library

/** Tuo_zhuai () method to drag and drop a popup element * Note: The CSS file will generally need to be in the element of a chunk of the cursor set as a hint can be dragged, such as: cursor:move; * No reference **/Feng_zhuang_ku.prototype.tuo_zhuai=function () {    if( This. jie_dian.length = = 1) {        varYan_su =NULL;  for(vari = 0; I < This. jie_dian.length; i++) {Yan_su= This. Jie_dian[i]; } Yan_su.onmousedown=function(e) {//Predef (e); Predef () function library function, block event default behavior,            vare1 = GetEvent (e);//getEvent () function library function, get event object, event object, cross browser ,            varDIFFX = E1.clientx-Yan_su.offsetleft; varDiffy = E1.clienty-Yan_su.offsettop; if(typeofYan_su.setcapture! = ' undefined ') {yan_su.setcapture (); } document.onmousemove=function(e) {varE2 =getEvent (e); varleft = E2.clientx-DIFFX; vartop = E2.clienty-Diffy; if(Left < 0) { left= 0; }Else if(Left > Getinner (). Width-yan_su.offsetwidth) { Left= Getinner (). Width-Yan_su.offsetwidth; }                if(Top < 0) {Top= 0; }Else if(Top > Getinner (). Height-yan_su.offsetheight) {Top= Getinner (). Height-Yan_su.offsetheight; } yan_su.style.left= left + ' px '; Yan_su.style.top= top + ' px ';            }; Document.onmouseup=function() {Document.onmousemove=NULL; Document.onmouseup=NULL; if(typeofYan_su.releasecapture! = ' undefined ') {yan_su.releasecapture ();        }            };    }; } Else{alert ("A popup element to implement the drag function, can only set a pop-up window element, currently Jie_dian array is more than one element please check!" ")    }    return  This;};

HTML code

<DivID= "Login">    <H2><imgsrc= "Img/close.png"alt=""class= "Close" />Website Login</H2>    <Divclass= "User">Account<inputtype= "text"name= "User"class= "text" /></Div>    <Divclass= "Pass">Password<inputtype= "Password"name= "Pass"class= "text" /></Div>    <Divclass= "button"><inputtype= "button"class= "Submit"value="" /></Div>    <Divclass= "Other">Register a new user | Forgot your password?</Div></Div>

CSS Code

/*Login Box*/#login{width:350px;Height:250px;Border:1px solid #ccc;position:Absolute;Display:None;Z-index:9999;Background-color:#fff;}#login H2{background:rgba (0, 0, 0, 0) url ("Img/login_header.png") repeat-x scroll 0 0;Border-bottom:1px solid #ccc;Color:#666;font-size:14px;Height:40px;Line-height:40px;text-align:Center;letter-spacing:1px;margin:0 0 20px;cursor:Move;}#login h2 img{cursor:Pointer;float: Right;position:relative; Right:8px;Top:14px;}#login div.user, #login div.pass{Color:#666;font-size:14px;padding:5px 0;text-align:Center;}#login Input.text{background:#fff None Repeat scroll 0 0;Border:1px solid #ccc;font-size:14px;Height:25px;width:200px;}#login. Button{padding:20px 0;text-align:Center;}#login Input.submit{background:rgba (0, 0, 0, 0) url ("Img/login_button.png") no-repeat scroll 0 0;Border:Medium None;cursor:Pointer;Height:30px;width:107px;}#login. Other{Color:#666;padding:15px 10px;text-align: Right;}/*Mask lock Screen block*/#suo_ping{Z-index:9998;/*Note: If the mask layer has an element above it, its hierarchy is greater than 9998*/background:#000;Filter:Alpha (OPACITY=50);Opacity:0.5;Display:None;}

Front desk JS Code

//Foreground Call CodeWindow.onload =function (){    //gets to the personal center element node, performing a mouse move-out method$ (). Huo_qu_class (' ge_ren_zhong_xin ', ' tou '). Shu_biao_yi_ru_yi_chu (function () {        //Change Personal Center background image when mouse is moved$( This). CSS (' background ', ' url (img/arrow2.png) No-repeat Right center '); //when the mouse is moved, the UL element is executed to display the method$ (). Huo_qu_name (' ul '). Xian_shi (); }, function () {        //change the background image of a personal center when the mouse is moved out$( This). CSS (' background ', ' url (img/arrow.png) No-repeat Right center '); //when the mouse moves out, the UL element is executed as a hidden method$ (). Huo_qu_name (' ul '). Yin_cang ();    }); //Popup Login box and Mask lock screen    //Gets the login box, executes the Login box Center method, executes the browser window event method$ (). HUO_QU_ID (' login '). Yuan_su_ju_zhong (). Chuang_kou_shi_jian (function () {        //Gets the login box, which executes the center method of the login box$ (). HUO_QU_ID (' login '); //Get mask lock element, perform mask lock screen method$ (). huo_qu_id (' suo_ping '). zhe_zhao_suo_ping ();    }); //Get login element node, execute Click event Method$ (). Huo_qu_class (' Deng_lu '). On_click (function () {        //Get login box, change CSS$ (). HUO_QU_ID (' login '). Xian_shi (). Yuan_su_ju_zhong (); //Get mask lock element, perform display method, perform Mask lock screen method$ (). huo_qu_id (' suo_ping '). Xian_shi (). zhe_zhao_suo_ping ();    }); //gets the close element in the login box, executes the Click event Method$ (). Huo_qu_class (' close '). On_click (function () {        //Get login box, change CSS$ (). HUO_QU_ID (' login '). Yin_cang (); //Get mask lock element, perform hidden method$ (). huo_qu_id (' suo_ping '). Yin_cang ();    }); //dragging$ (). HUO_QU_ID (' login '). Tuo_zhuai ();};

135th, JavaScript, Package Library--Drag