//获取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‘);

  //光标当前的位置 = 光标的坐标值 - 盒子距离窗口左边的值
  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;

  //窗口宽度和高度
  var windWidth = document.documentElement.clientWidth || document.body.clientWidth;
  var windHeight = document.documentElement.clientHeight || document.body.clientHeight;

  //可拖拽的最大宽度和高度 窗口宽度 - 盒子的自身宽度
  var maxW = windWidth - dragParentNode.offsetWidth;
  var maxH = windHeight - dragParentNode.offsetHeight;

  //判断左右边界
  if(left < 0){
    left = 0;
  }else if(left > maxW){
    left = maxW - 10;
  }

  //判断上下边界
  if(top < 0){
    top = 10;
  }else if(top > maxH){
    top = maxH;
  }

  dragParentNode.style.left = left + ‘px‘;
  dragParentNode.style.top = top + ‘px‘;
}