js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

QQ面板拖拽，效果如图

JavaScript代码如下：

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";


}

要点： 

1.阻止事件冒泡

loginState.onclick点击事件冒泡，导致下拉列表无法点开

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

}

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

}

lis[i].onclick列表项的点击事件冒泡，导致下拉列表无法隐藏 

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

}

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

}

2.鼠标事件坐标获取

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";
}

3.封装各浏览器通用的getElementsByClassName()方法

方法返回的是一个数组，切记

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# QQ面板拖拽  # js面板拖拽  # DOM事件  # Javascript DOM事件操作小结(监听鼠标点击、释放  # 悬停、离开等)  # JavaScript DOM事件(笔记)  # JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后th  # JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发  # 关于javascript DOM事件模型的两件事  # javascript循环变量注册dom事件 之强大的闭包  # 谈谈我对JavaScript DOM事件的理解  # 深入理解JS DOM事件机制  # 理解javascript中DOM事件  # js中DOM事件绑定分析  # JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题  # js DOM的事件常见操作实例详解  # 鼠标  # 按下  # 的是  # 如图  # 大家多多  # 滑过  # 鼠标点击  # 拖拽  # 拖页  # loginPanel  # close  # fnDown  # onmousedown  # drag  # onload  # window  # login_logo_webqq  # oTitle  # display  # li 

相关文章： javascript中对象的定义、使用以及对象和原型链操作小结  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  如何在景安服务器上快速搭建个人网站？  如何注册花生壳免费域名并搭建个人网站？  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何在VPS电脑上快速搭建网站？  专业商城网站制作公司有哪些,pi商城官网是哪个？  如何通过远程VPS快速搭建个人网站？  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  建站之星与建站宝盒如何选择最佳方案？  b2c电商网站制作流程,b2c水平综合的电商平台？  如何通过二级域名建站提升品牌影响力？  建站主机选虚拟主机还是云服务器更好？  建站主机数据库如何配置才能提升网站性能？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  如何在云主机上快速搭建多站点网站？  网站app免费制作软件,能免费看各大网站视频的手机app？  制作宣传网站的软件,小红书可以宣传网站吗？  建站VPS推荐：2025年高性能服务器配置指南  深圳 网站制作,深圳招聘网站哪个比较好一点啊？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  一键网站制作软件,义乌购一件代发流程？  网站制作说明怎么写,简述网页设计的流程并说明原因？  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  外贸公司网站制作,外贸网站建设一般有哪些步骤？  济南企业网站制作公司,济南社保单位网上缴费步骤？  建站之星24小时客服电话如何获取？  长沙企业网站制作哪家好,长沙水业集团官方网站？  长沙做网站要多少钱,长沙国安网络怎么样？  如何快速查询网站的真实建站时间？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  微信h5制作网站有哪些,免费微信H5页面制作工具？  制作旅游网站html,怎样注册旅游网站？  建站为何优先选择香港服务器？  建站之星如何优化SEO以实现高效排名？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  香港网站服务器数量如何影响SEO优化效果？  香港服务器部署网站为何提示未备案？  高防服务器如何保障网站安全无虞？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  如何在橙子建站中快速调整背景颜色？  如何快速搭建响应式可视化网站？  建站之星logo尺寸如何设置最合适？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  如何设置并定期更换建站之星安全管理员密码？  网站制作模板下载什么软件,ppt模板免费下载网站？  建站168自助建站系统：快速模板定制与SEO优化指南