前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下jQuery,我司现在用的还是比较多,毕竟用了它不用考虑IE兼容性,可以让开发更有效率。

1.项目需求及基本的HTMLCSS

相信大家都用过QQ登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态。
首先做出HTML的结构

    <div class="loginPanel" id="loginPanel">
<!-- 关闭区域 -->
<div style="position: relative; z-index: 1;">
<div class="ui_boxyClose" id="ui_boxyClose"></div>
</div>
<!-- QQ图标以及点击区域 -->
<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>
<li id="callme" class="statePanel_li">
<div class="stateSelect_icon callme"></div>
<div class="stateSelect_text">Q我吧</div>
</li>
<li id="away" class="statePanel_li">
<div class="stateSelect_icon away"></div>
<div class="stateSelect_text">离开</div>
</li>
<li id="busy" class="statePanel_li">
<div class="stateSelect_icon busy"></div>
<div class="stateSelect_text">忙碌</div>
</li>
<li id="silent" class="statePanel_li">
<div class="stateSelect_icon silent"></div>
<div class="stateSelect_text">请勿打扰</div>
</li>
<li id="hidden" class="statePanel_li">
<div class="stateSelect_icon hidden"></div>
<div class="stateSelect_text">隐身</div>
</li>
</ul>
</div>
</div>
</div>
</div>

2.实现拖拽登录框

CSS部分省略不写

  • 由于涉及到大量的操作class类名的操作,首先封装一个可以兼容IE取class类名的函数,因为IE10以前是不支持document.getElementByClassName()

    /**
*
* @clsName 要找的className的名字
* @parent 可选参数,传入父元素就在父元素下找所有的className
*/
function getByClass(clsName, parent) {
//如果可以用getElementsByClassName
if(document.getElementsByClassName){
return document.getElementsByClassName(clsName);
}
//加入传入的parent存在就用document.getElementById(parent)取父元素,减少判断,否则oParent就等于document
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;
  • 函数drag

    function drag(){
//首选取出要点击然后拖拽的区域
var oTitle = getByClass('login_logo_webqq', 'loginPanel')[0];
//然后给这个元素绑定一个鼠标按下时候的时间,鼠标按下时执行函数fnDown()
oTitle.onmousedown = fnDown;
}
  • 函数fnDown()

    function fnDowm(event) {
//兼容一下IE的事件
event = event || window.event;
//取到整个要拖拽的登陆框的id
var oDrag = document.getElementById('loginPanel'),
//光标按下时,光标和面板之间的距离
//event.clientX是光标按下时,光标距离窗口水平方向的距离
//event.clientY是光标按下时,光标距离窗口垂直方向的距离
//oDrag.offsetLeft面板距离窗口的水平距离
disX = event.clientX - oDrag.offsetLeft,
disY = event.clientY - oDrag.offsetTop;
//因为光标是在整个窗口移动,所以为窗口绑定一个鼠标移动的事件
document.onmousemove = function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
}
  • 函数fnMove()
    只需要实现光标按下时,光标移动到某点时,登录框处的位置恰好等于光标此时减去光标到登陆框边缘的距离

    //
function fnMove(e,posX,posY){
var oDrag = document.getElementById('loginPanel');
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;
} //及时更新登录框的style.left和right信息
oDrag.style.left = l + 'px';
oDrag.style.top = t + 'px';
}

3.实现点击按钮关闭输入框

//获取到关闭标签元素

    var oClose = document.getElementById('ui_boxyClose');
//为这个元素绑定一个click事件
oClose.onclick = function () {
//当点击这个按钮时,把这个按钮的display设置为none
document.getElementById('loginPanel').style.display = 'none';
}

002-DOM事件实例-实现一个可以拖拽的登陆窗口的更多相关文章

  1. jQuery的DOM操作实例(2)——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  2. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  3. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  4. Javascript写的一个可拖拽排序的列表

    自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...

  5. (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  6. 前端笔记之jQuery(下)事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON

    一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...

  7. AJ学IOS(36)UI之手势事件旋转_缩放_拖拽

    AJ分享,必须精品 效果 完成一个图片的捏合缩放,拖拽,旋转动作. 设计思路 拖拽: 首先是最简单的拖拽 //拖拽 -(void)panTest { UIPanGestureRecognizer *p ...

  8. [Java]接受拖拽文件的窗口

    至于这个问题,Java的awt.dnd包下提供了许多完成这一功能的类 例如DropTarget.DropTargetListener等 先来讲一下DropTarget类,这个类完成和拖拽.复制文件等操 ...

  9. cocos2d-x 3.0 学习笔记: 一个可以拖拽的Label及schedule的应用

    #ifndef _DRAGLABEL_H_ #define _DRAGLABEL_H_ #include "cocos2d.h" USING_NS_CC; class DragLa ...

随机推荐

  1. 十、linux-mysql下的mysql数据库增量恢复

    1.全量备份 全量数据就是数据库中所有的数据,全量备份就是把数据库中所有的数据进行备份. 备份所有库: mysqldump -uroot -ppoldboy -S /data/3306/mysql.s ...

  2. 吴裕雄--天生自然python学习笔记:python 用pygame模块动画一让图片动起来

    动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...

  3. 关于k8s资源类型和缩写

    资源类型 缩写 描述 clusters     componentstatuses cs   configmaps cm   daemonsets ds   deployments deploy   ...

  4. 总结oracle18.3c-centos7-安装

    官网下载对应名字rpm包 oracle-database-ee-18c-1.0-1.x86_64.rpm下载依赖包 除非已有依赖 否则会报缺少依赖错误 1 curl -o oracle-databas ...

  5. [LC] 328. Odd Even Linked List

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  6. 响应式WEB页面开发实践

    转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...

  7. 使用iframe的好处与坏处详细比拼

    一.使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片.文本.url等内容的,因为该内容不属于该页面,只是访问的时候被临时的调用,而且在SEO建议中也有提到:"f ...

  8. http、https的压测工具——apacheab 、webbench

    http的压测工具 搞清楚不同的安装方法,执行文件.配置文件的路径. yum安装: 执行文件在/usr/bin 下,一般为执行文件 配置文件在/etc目录下 conf文件 源码安装: 执行文件在安装文 ...

  9. python3之urllib基础

    urllib简单应用html=urllib.request.urlopen(域名/网址).read().decode('utf-8')----->--->urlopen-->获取源码 ...

  10. chap4-关联接口测试-通过全局变量传递cookie

    # 1 http_request.py import requests class HttpRequest: def http_request(self, url, method, data=None ...