by SUNHW
Get classname
function Returnclassname (className, parentnode) {
var parentnode = parentnode? document.getElementById (parentnode): document;
var classnames = [];
var eles = parentnode.getelementsbytagname (' * ');
for (var i = 0, len = eles.length; i < Len; i++) {
if (Eles[i].classname = = ClassName) {
Classnames.push (Eles[i]);
}
}
return classnames;
}window.onload = Dragfun;function Dragfun () {
var dragnode = returnclassname (' login_logo_webqq ', ' Loginpanel ') [0];
Dragnode.onmousedown = Dragbeginfun;
var colsebtn = document.getElementById (' Ui_boxyclose ');
Colsebtn.onclick = function () {
document.getElementById (' Loginpanel '). style.display = ' None ';
}//click Tab Change
var loginstatepanel = document.getElementById (' Loginstatepanel '),
Loginstatetxt = document.getElementById (' Login2qq_state_txt '),
Loginstateshow = document.getElementById (' loginstateshow '),
Loginstate = document.getElementById (' loginstate '); Click Loginstatepanel Show panel need Zuzhi Moren event
Loginstate.onclick = function (e) {
E = e | | window.event;
if (e.stoppropagation) {
E.stoppropagation ();
}else{
E.cancelbubble = true;
}
LoginStatePanel.style.display = ' block ';
}//for each
var list = loginstatepanel.getelementsbytagname (' li ');
for (var i = 0, len = list.length; i < Len; i++) {//onmouseover
List[i].onmouseover = function () {
This.style.backgroundColor = ' #567 ';
}
onmouseout
List[i].onmouseout = function () {
This.style.backgroundColor = ' #fff ';
}
OnClick
List[i].onclick = function (e) {
E = e | | window.event;
if (e.stoppropagation) {
E.stoppropagation ();
}else{
e.cancelbubble = true;//ie Zuzhi Moren Event
} LoginStatePanel.style.display = ' none ';
var id = this.id;
loginstatetxt.innerhtml = Returnclassname (' stateselect_text ', id) [0].innerhtml;
Loginstateshow.classname = ";
Loginstateshow.classname = ' login-state-show ' + ID;
}
}//none Loginstatepanel
Document.onclick = function () {
LoginStatePanel.style.display = ' None ';
}}function Dragbeginfun (Event) {
Event = Event | | window.event;
var dragparentnode = document.getElementById (' Loginpanel '); Cursor current position = coordinate value of cursor-the value of the box from the left side of the window
var disx = Event.clientx-dragparentnode.offsetleft;
var disy = event.clienty-dragparentnode.offsettop; OnMouseMove Event
Document.onmousemove = function (event) {
Event = Event | | window.event;
Dragmovefun (event, DISX, Disy);
return false;
}//onmouseup Event
Document.onmouseup = function () {
Document.onmousemove = null;
Document.onmouseup = null;
}
}function Dragmovefun (E, PosX, PosY) {
var dragparentnode = document.getElementById (' Loginpanel '); //
var left = E.clientx-posx;
var top = E.clienty-posy; Window width and Height
var windwidth = Document.documentElement.clientWidth | | Document.body.clientWidth;
var windheight = Document.documentElement.clientHeight | | Document.body.clientHeight; Maximum width and height of the window width-the width of the box itself
var maxw = windwidth-dragparentnode.offsetwidth;
var maxh = windheight-dragparentnode.offsetheight; Judging the left and right borders
if (left < 0) {
left = 0;
}else if (Left > Maxw) {
left = maxW-10;
}//Judging the upper and lower bounds
if (Top < 0) {
top = 10;
}else if (Top > Maxh) {
top = Maxh;
} DragParentNode.style.left = left + ' px ';
DragParentNode.style.top = top + ' px ';
}
Drag-and-drop-Ost javascript
