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 相关文章推荐
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
详解JavaScript中return的用法
May 08 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
JS实现li标签的删除
Apr 12 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python3计算三角形的面积代码
2017/12/18 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python字符串循环左移
2019/03/08 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
在python中做正态性检验示例
2019/12/09 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
学校安全责任书
2014/04/14 职场文书
医师定期考核实施方案
2014/05/07 职场文书
个人自荐材料
2014/05/23 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers