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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
微信小程序实现原生步骤条
Jul 25 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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 动态添加记录
2009/03/10 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python如何判断数独是否合法
2016/09/08 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python如何根据时间序列数据作图
2020/05/12 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
接受捐赠答谢词
2014/01/27 职场文书
售后求职信范文
2014/03/15 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
社会实践的活动方案
2014/08/22 职场文书
入党介绍人意见2015
2015/06/01 职场文书