DOM事件探秘之三_QQ面板拖拽效果

最新推荐文章于 2022-03-09 18:51:50 发布
最新推荐文章于 2022-03-09 18:51:50 发布
阅读量470 收藏 1
点赞数
分类专栏： DOM事件 JS小功能 文章标签： dom 鼠标 移动 QQ拖拽 QQ面版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sofia92/article/details/50499377
版权

注意点：

在标题区按下-在页面移动-释放鼠标时停止移动
onmousedown：用户按下任何鼠标按钮时触发
onmousemove：当鼠标指针在元素内部移动时触发
onmouseup：当用户释放鼠标按钮时触发
鼠标的光标位置获取：clientX和clientY属性，所有浏览器都支持这两个属性。
保持鼠标与面板的相对位置关系，按下时在哪，松开鼠标时光标还在那
移动的范围极值，始终在浏览器窗口内移动
移动拖拽效果核心 位置关系（光标与盒子的距离-clientX-offsetLeft，盒子与浏览器的距离-clientWidth，光标与浏览器的距离-clientX）

实现效果：
QQ面板拖拽效果

【HTML】

<head>
    <title>拖动</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag.js"></script>
</head>
<body>
    <div class="loginPanel" id="loginPanel">
         <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <div class="login_logo_webqq"></div>

        <div class="inputs">
            <div class="sign-input"><span>帐　号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
            <div class="sign-input"><span>密　码：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
        </div>

        <div class="bottomDiv">
            <div class="btn" style="float: left"></div>
            <div>
                <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
                    <div id="loginStateShow" class="login-state-show online">状态</div>
                    <div class="login-state-down">下</div>
                    <div class="login-state-txt" id="login2qq_state_txt">在线</div>
       <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
        <li id="online" class="statePanel_li">
            <div class="stateSelect_icon online"></div>
            <div class="stateSelect_text">我在线上</div>
        </li>
    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

【drag.js】

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];
    // 拖曳鼠标按下时去调用一个fnDown()函数
   oTitle.onmousedown=fnDown;
   // 关闭
   var oClose=document.getElementById('ui_boxyClose');
   oClose.onclick=function(){
      document.getElementById('loginPanel').style.display='none';
   }
   // 切换状态
   var loginState=document.getElementById('loginState'),
       stateList=document.getElementById('loginStatePanel'),
       lis=stateList.getElementsByTagName('li'),
       stateTxt=document.getElementById('login2qq_state_txt'),
       loginStateShow=document.getElementById('loginStateShow');

  loginState.onclick=function(e){
     e = e || window.event;
     if(e.stopPropagation){//点击状态列表的时候希望能阻止时间冒泡
          e.stopPropagation();
     }else{
          e.cancelBubble=true;
     }
     stateList.style.display='block';//点击状态时能弹出状态列表
   }

   // 鼠标滑过、离开和点击状态列表时
   for(var i=0,l=lis.length;i<l;i++){
      lis[i].onmouseover=function(){
        this.style.background='#567';
      }
      lis[i].onmouseout=function(){
        this.style.background='#FFF';
      }
      lis[i].onclick=function(e){
        e = e || window.event;
        if(e.stopPropagation){
          e.stopPropagation();//点击<li>时不要向外冒泡，这样点击<li>让<ul>隐藏；
        }else{
          e.cancelBubble=true;
        }
        var id=this.id;
        stateList.style.display='none';//点击<li>时，ul隐藏，因为事件冒泡，所以点了li触发了ul触发了login state，在上面，我们定义了点击login state时block，所以点击li 。ul还在并未隐藏掉
        stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;//只是替换了状态的文本内容，“我在线上”这类的文本
        loginStateShow.className='';//先清空class
        loginStateShow.className='login-state-show '+id;//再拼接class
      }
   }
   document.onclick=function(){//在页面的任何地方点击，list隐藏
      stateList.style.display='none';
   }
}

function fnDown(event){
  event = event || window.event;
  var oDrag=document.getElementById('loginPanel'),
      // 光标按下时光标和面板之间的距离(获取鼠标按下的位置坐标，始终保持鼠标按下的位置与面板的相对位置)
      disX=event.clientX-oDrag.offsetLeft,
      disY=event.clientY-oDrag.offsetTop;
  // 移动
  document.onmousemove=function(event){
    event = event || window.event;
    fnMove(event,disX,disY);
  }
  // 释放鼠标
  document.onmouseup=function(){
    // DOM 0级事件，卸载事件及赋值为空
    document.onmousemove=null;
    document.onmouseup=null;
  }
}

function fnMove(e,posX,posY){
  var oDrag=document.getElementById('loginPanel'),
    // 面板的移动范围，l是面板与浏览器左边的距离。
      l=e.clientX-posX,
      t=e.clientY-posY,
    // 浏览器窗口的长和宽
      winW=document.documentElement.clientWidth || document.body.clientWidth,
      winH=document.documentElement.clientHeight || document.body.clientHeight,
    // 滚动的最大值      maxW=winW-oDrag.offsetWidth-10,
      maxH=winH-oDrag.offsetHeight;
  if(l<0){
    l=0;
  }else if(l>maxW){
    l=maxW;
  }
  if(t<0){
    t=10;
  }else if(t>maxH){
    t=maxH;
  }
  oDrag.style.left=l+'px';
  oDrag.style.top=t+'px';
}

【CSS】

  .loginPanel {
            width: 380px;
            height: 247px;
            left: 400px;
            top: 120px;
            position: absolute;
            border: 1px solid #ccc;
            background: #f6f6f6;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 0 0 8px #000;
            -webkit-box-shadow: 0 0 8px #000;
            box-shadow: 0 0 8px #000;
        }
        .login_logo_webqq {
            background: url('../images/login_window_logo.png') no-repeat -210px -0px;
            margin-left: 100px;
            margin-top: 10px;
            width: 200px;
            height: 44px;
            cursor: move;
        }
        .inputs {
            font: bold 15px arial;
            margin-left: 80px;
            margin-top: 30px;
        }
            .inputs .sign-input {
                padding-bottom: 20px;
            }
                .inputs .sign-input input {
                    width: 170px;
                    border: 1px #ccc solid;
                    color: #868686;
                    font-size: 16px;
                    padding: 2px;
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -khtml-border-radius: 10px;
                    -border-radius: 10px;
                    outline: none;
                }
        .btn {
            background: url("../images/login_btn.png") no-repeat -111px 0;
            width: 111px;
            height: 36px;
            border: 0;
            text-align: center;
            line-height: 20px;
            color: #0C4E7C;
            cursor: pointer;
            margin-left: 14px;
        }
        .login-state-trigger {
            cursor: pointer;
            display: block;
            float: left;
            height: 16px;
            overflow: hidden;
            width: 120px;
            margin: 4px 0 0 0;
        }
        .login-state-trigger2 {
            margin: 10px 0 0 20px;
        }
        .login-state-down {
            background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
            float: left;
            height: 6px;
            margin-top: 5px;
            overflow: hidden;
            text-indent: -999em;
            width: 7px;
        }
        .login-state-show {
            float: left;
            height: 14px;
            overflow: hidden;
            text-indent: -999em;
            width: 14px;
            margin: 1px 4px 0 0;
        }
        .login-state-txt {
            float: left;
            margin-left: 5px;
            font-size: 12px;
            >line-height:18px!important;
        }
        .login-state .callme {
            background: url("../images/ptlogin.png") -72px 0 no-repeat;
        }
        .login-state .online {
            background: url("../images/ptlogin.png") 0 0 no-repeat;
        }
        .login-state .away {
            background: url("../images/ptlogin.png") -18px 0 no-repeat;
        }
        .login-state .busy {
            background: url("../images/ptlogin.png") -36px 0 no-repeat;
        }
        .login-state .silent {
            background: url("../images/ptlogin.png") -108px 0 no-repeat;
        }
        .login-state .hidden {
            background: url("../images/ptlogin.png") -54px 0 no-repeat;
        }
        .statePanel {
            display: none;
            position: absolute;
            right: 68px;
            top: 193px;
            z-index: 10;
            margin: 0;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc #6a6a6a #666 #cdcdcd;
            padding: 0;
            width: 100px;
            height: 133px;
            overflow: hidden;
            background: white;
            font-size: 12px;
            line-height: 1.5;
        }
            .statePanel .statePanel_li {
                display: block;
                float: left;
                margin: 0;
                padding: 3px 0;
                width: 100px;
                height: 16px;
                line-height: 16px;
                overflow: hidden;
                zoom: 1;
                cursor: pointer;
            }
        .stateSelect_icon {
            float: left;
            margin: 2px 0 0 5px;
            width: 14px;
            height: 14px;
            overflow: hidden;
        }
        .stateSelect_text {
            margin: 0 0 0 22px;
        }
        .bottomDiv {
            margin-left: 70px;
        }      .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}
香雪儿sofia
关注
专栏目录
unity实现物品或技能图标的拖拽功能
qq_33657132的博客
04-07 3230
在设计背包或者技能栏的时候，通常采用MVC模式。 Model脚本读取存放在数据库中的物品或技能的相关资源（Icon，prefabs） view脚本将读取的资源显示在背包或技能栏中。 而Controller脚本我则用来实现物品或技能的拖拽。而我的Drag脚本分在Controller中，给每个物品或技能资源都挂上脚本，实现拖拽核心功能。 而Drag脚本中的方法Unity已提供接
js实现QQ面板拖拽效果（DOM事件探秘）（全）
10-19
在详细探讨如何使用JavaScript实现类似QQ面板的拖拽效果之前，我们需要先了解几个关键的Web开发概念，包括DOM事件处理和DOM操作。 DOM（Document Object Model，文档对象模型）是一个跨平台的接口，允许程序和脚本...
Android仿QQ未读消息--红点拖拽删除【源代码】
08-30
本文Demo是一款仿qq未读消息拖拽删除的例子，继承RelativeLayout的WaterDrop实现了圆形图标功能；继承ImageView的CircleImageView圆形图片功能。效果非常不错，很适合有圆形设计的朋友参考
js模拟QQ面板拖拽效果及状态切换效果（DOM事件）
muzi187的博客
12-13 903
利用js的DOM事件模拟QQ面板的拖拽效果，以及QQ面板的状态切换效果 拖动 帐　号： 密　码：
仿QQ消息提醒小红点拖拽粘连效果
11-09
仿QQ消息提醒小红点拖拽粘连效果 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
Unity常用的三种拖拽方法（内置方法 + 接口 + Event Trigger组件）
qq_52159742的博客
06-07 5640
三种常用拖拽方法OnMouseDrag等内置方法、Event Trigger组件、拖拽接口IDragHandler方法 Unity内置方法实现: #region Drag2DSprite 加上2D碰撞体 //[SerializeField] private bool isSelected; //void Start() //{ //} //void Update() //{ // //Debug.Log(Input.mousePosi
QQ面板拖拽（慕课网DOM事件探秘）（上）
nqxcwl的专栏
11-06 267
QQ面板拖拽，效果如图 JavaScript代码如下： function getByClass(clsName, parent) { var oParent = parent ? document.g...
QQ面板拖拽（慕课网DOM事件探秘）（下）
weixin_30527143的博客
09-13 73
2.鼠标事件坐标获取 function fnDown(event) { var event = event || window.event; var oDrag = document.getElementById("loginPanel"); //光标按下时光标和面板之间的距离； var disX = event.clientX - oDrag.off...
DOM.rar_DOM SAX_XML DOM_dom xml java_sax_simple
09-22
DOM（Document Object Model）和SAX（Simple API for XML）是解析XML文档的两种主要方法。 DOM是一种W3C标准，它将XML文档视为一棵树形结构，其中每个节点代表XML文档的一部分。在DOM解析中，整个XML文档被加载到...
DOM事件探秘篇
01-19
1.事件流 时间流— 描述的是从页面中接受事件的顺序。 （1）事件冒泡流。 事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 （2）事件捕获流。 不太...
xml_DOM_SAX.rar_DOM_dom xml saxxml_java dom_sax
09-24
与DOM不同，SAX是一种事件驱动的解析方式。它不会一次性加载整个XML文档，而是逐行读取，遇到开始标签、结束标签、属性等事件时，会触发相应的回调函数。这种方式节省了内存，但操作XML数据相对繁琐，因为需要编写...
DOM.zip_DOM_www.692dom，com
09-20
JavaScript通过监听这些事件并附加相应的处理函数，可以实现丰富的用户交互效果。 以下是DOM事件操作的一些核心知识点： 1. **事件绑定**: 可以使用`addEventListener`方法将事件处理器绑定到DOM元素，例如：`...
Unity 实现图标的拖拽功能
新人
03-09 1976
OnPointUp 不仅鼠标松开会调用，鼠标移动也会调用。 时间紧迫，只贴核心代码 using UnityEditor; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using UnityEngine.Events; using System; namespace Scripts.LuaApi { public class DragItemArea : MonoBehaviour,IBeginDra
qq面板切换效果
bobobe的专栏
03-03 587
待写
基于Java语言的蓝牙遥控器设计源码，支持键盘、鼠标、影音遥控器
10-05
该项目为基于Java语言的蓝牙遥控器设计源码，包含539个文件，涵盖307个Java源文件、120个XML配置文件、34个PNG图片文件、16个Gradle构建文件、12个Git忽略文件、9个文本文件、6个JAR包文件、5个JSON配置文件、5个JPG图片文件。该遥控器支持键盘、鼠标和影音控制功能，适用于多种场合。
数据手册-74HC573-datasheet.zip
10-05
数据手册-74HC573-datasheet.zip
苏州科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
c++的概要介绍与分析
最新发布
10-05
关于C++的资源描述和项目源码，以下是一些关键信息： 资源描述 C++是一种广泛应用于开发高性能应用程序的编程语言，既有高级语言的特性，也有低级语言的效率。以下是C++学习资源的简要描述： 在线课程：如优达学城提供的C++中级课程，以及北京大学提供的C++程序设计和C++程序设计进阶课程，这些课程适合从零开始系统学习C++，涵盖从基础到高级的编程内容。 书籍：如《C++ Primer》、《Effective C++》和《C++标准库》等，这些书籍详细介绍了C++语言的基本概念和编程技术，适合作为自学或课堂教学的参考资料。 在线社区：如CSDN博客和Stack Overflow等，这些社区提供了丰富的C++编程教程、示例代码和问题解决方案，是学习和交流C++编程技术的重要平台。 开发工具：如Visual C++（VC）等集成开发环境（IDE），提供了编译器、调试器和其他工具，方便开发者进行Windows平台上的C++应用程序开发。 项目源码 由于项目源码通常包含大量的代码文件和资源文件，且涉及版权和知识产权问题，因此无法在此直接提供完整的项目源码。不过，以下是一些获取C++项目源码的
理解DOM事件：从DOM0到DOM3级事件处理
"这篇文章主要介绍了DOM事件的三个级别——DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。DOM0级事件处理是最早的事件处理方式，通过在HTML元素上直接设置属性来触发函数。DOM2级事件处理引入了事件监听器的概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值