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


Posted in Javascript onSeptember 19, 2017

QQ面板拖拽,效果如图

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jQuery基础知识小结
Dec 22 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
node文件上传功能简易实现代码
Jun 16 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
JavaScript事件处理程序详解
Sep 19 #Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
You might like
php 面向对象的一个例子
2011/04/12 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JavaScript字符串对象
2017/01/14 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python线程池threadpool使用篇
2018/04/27 Python
python 自动去除空行的实例
2018/07/24 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
汽车驾驶求职信
2013/10/25 职场文书
销售文员岗位职责
2013/11/29 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫