Home > Web Front-end > JS Tutorial > body text

js code to implement QQ panel drag and drop effect

小云云
Release: 2018-02-08 11:49:53
Original
1744 people have browsed it

This article mainly introduces the QQ panel drag effect and explores the DOM events of MOOC in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

QQ panel drag, the effect is as shown

The JavaScript code is as follows:


function getByClass(clsName, parent) {
  var oParent = parent ? document.getElementById(parent) : document,
    eles = [],
    elements = oParent.getElementsByTagName('*');

  for (var i = 0, l = elements.length; i < l; i++) {
    if (elements[i].className == clsName) {
      eles.push(elements[i]);
    }
  }
  return eles;
}

window.onload = drag;

function drag() {
  var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
  //拖页
  oTitle.onmousedown = fnDown;
  //关闭页面
  var close = document.getElementById("ui_boxyClose");
  close.onclick = winClose;
  //切换状态
  var loginState = document.getElementById("loginState");
  var stateList = document.getElementById("loginStatePanel");
  var lis = stateList.getElementsByTagName("li");
  var stateTxt = document.getElementById("login2qq_state_txt");
  var loginStateShow = document.getElementById("loginStateShow");
  //点击显示下拉单
  loginState.onclick = function (e) {
    stateList.style.display = "block";
    //阻止事件冒泡;
    e = event || window.event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  };
  //鼠标滑过,背景变色
  for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
      this.style.backgroundColor = "#888";
    };
    lis[i].onmouseout = function () {
      this.style.backgroundColor = "#fff";
    };
    //鼠标点击,txt改变,图标改变
    lis[i].onclick = function (e) {
      stateList.style.display = "none";
      //阻止事件冒泡
      e = event || window.event;
      if(typeof e.stopPropagation){
        e.stopPropagation();
      }else {
        e.cancelBubble = true;
      }
      var id = this.id;
      loginStateShow.className = "login-state-show "+id;
      var text = getByClass("stateSelect_text",id)[0].innerHTML;
      stateTxt.innerHTML = text;
    }

  }
  document.onclick = function () {
    stateList.style.display = "none";
  }
}

function winClose() {
  var box = document.getElementById("loginPanel");
  box.style.display = "none";
}

function fnDown(event) {
  var event = event || window.event;
  var oDrag = document.getElementById("loginPanel");
  //光标按下时光标和面板之间的距离;
  var disX = event.clientX - oDrag.offsetLeft;
  var disY = event.clientY - oDrag.offsetTop;
  //移动
  document.onmousemove = function (event) {
    event = event || window.event;
    fnMove(event, disX, disY);
  };
  document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
  }
}

function fnMove(event, posX, posY) {
  var oDrag = document.getElementById("loginPanel");
  var l = event.clientX - posX;
  var t = event.clientY - posY;
  var winW = document.documentElement.clientWidth;
  var winH = document.documentElement.clientHeight;
  var maxW = winW - oDrag.offsetWidth - 10;
  var maxH = winH - oDrag.offsetHeight;
  //当l=0时,窗口不能继续外移
  if (l < 0) {
    l = 0;
  } else if (l > maxW) {
    l = maxW;
  }

  if (t < 10) {
    t = 10;
  } else if (t > maxH) {
    t = maxH;
  }

  oDrag.style.left = l + "px";
  oDrag.style.top = t + "px";


}
Copy after login

Key points:

1. Prevent event bubbling

loginState.onclick click event bubbling, resulting in the drop-down list being unable to be clicked


loginState.onclick = function () {
  stateList.style.display = "block";

}

document.onclick = function () {
    stateList.style.display = "none";

}
Copy after login

lis[i].onclick The click event of the list item bubbles up, resulting in the drop-down list being unable to be hidden


lis[i].onclick = function () {
  stateList.style.display = "none";

}

loginState.onclick = function () {
  stateList.style.display = "block";

}
Copy after login

2. Mouse event coordinate acquisition


function fnDown(event) {
  var event = event || window.event;
  var oDrag = document.getElementById("loginPanel");
  //光标按下时光标和面板之间的距离;
  var disX = event.clientX - oDrag.offsetLeft;
  var disY = event.clientY - oDrag.offsetTop;
  //移动
  document.onmousemove = function (event) {
    event = event || window.event;
    fnMove(event, disX, disY);
  };
  document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
  }
}
function fnMove(event, posX, posY) {
  var oDrag = document.getElementById("loginPanel");
  var l = event.clientX - posX;
  var t = event.clientY - posY;
  var winW = document.documentElement.clientWidth;
  var winH = document.documentElement.clientHeight;
  var maxW = winW - oDrag.offsetWidth - 10;
  var maxH = winH - oDrag.offsetHeight;
  //当l=0时,窗口不能继续外移
  if (l < 0) {
    l = 0;
  } else if (l > maxW) {
    l = maxW;
  }

  if (t < 10) {
    t = 10;
  } else if (t > maxH) {
    t = maxH;
  }

  oDrag.style.left = l + "px";
  oDrag.style.top = t + "px";
}
Copy after login

3. Encapsulate the getElementsByClassName() method common to all browsers

The method returns an array, remember


function getByClass(clsName, parent) {
 var oParent = parent ? document.getElementById(parent) : document,
  eles = [],
  elements = oParent.getElementsByTagName(&#39;*&#39;);

 for (var i = 0, l = elements.length; i < l; i++) {
  if (elements[i].className == clsName) {
   eles.push(elements[i]);
  }
 }
 return eles;
}
Copy after login

Related recommendations:

vue-slicksort A vue.js drag component

JS implements changing the size of objects based on dragging Method

JavaScript mouse drag event implementation case

The above is the detailed content of js code to implement QQ panel drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!