参考：慕课网DOM实践探秘 http://www.imooc.com/learn/138

实现需求：点击页面头部，可以拖动面板。使用js原生和jquery 各实现一次。

可以学到：1、鼠标在当前页面的位置。

　　　　　2、事件处理程序，阻止冒泡，

　　　　　3、面板位置的逻辑计算。

　　　　　4、鼠标事件：onmousedown (鼠标点下)  onmouseup  (鼠标释放) onmousemove (鼠标移动)

课前须知：html css javascript jquery

实例：

JS / jquery 实现页面 面板拖动 QQ网页版登陆页面拖动的更多相关文章

  1. HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

    昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一 ...

  2. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  3. 16-网页,网站,微信公众号基础入门(网页版MQTT,页面控件位置调整入门)

    https://www.cnblogs.com/yangfengwu/p/11200767.html 说一下,只要你java学的很好,那么几乎所有的语言都不在话下了 来看一下样式设置 运行 在左上角感 ...

  4. Wordpress在主题中自定义登陆页面并且禁用自带的登陆页面

    在使用Wordpress制作主题之后,不想要他自带的登陆页面以及地址. 1.新建一个用户页面来接管与登陆相关的动作 //在主题根目录下新建page-login.php,通过action获取用户动作,然 ...

  5. SpringBootSecurity学习（02）网页版登陆配置类代替默认配置

    增加Security配置类 前面演示了一个简单的登录入门例子,使用springboot-security默认的配置实现,虽然非常简单,但是基本实现了登录功能.不过在生产环境下,显然不能仅仅使用如此简单 ...

  6. [Backbone.js]如何用backbone写一个仿网页版微信的webapp?

    var Chat = Backbone.Model.extend({ idAttribute:'id', initialize:function(options){ var users = this. ...

  7. 微信网页版APP - 网页微信客户端电脑版体验

    微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...

  8. session过期跳转到登陆页面并跳出iframe框架的两个方法

    最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一 ...

  9. JavaWeb-SpringSecurity自定义登陆页面

    系列博文 项目已上传至guthub 传送门 JavaWeb-SpringSecurity初认识 传送门 JavaWeb-SpringSecurity在数据库中查询登陆用户 传送门 JavaWeb-Sp ...

随机推荐

  1. elasticsearch this is not a http port

    访问的是elastic search的tcp端口,需换成http端口. elastic search默认tcp端口9300,http端口9200 如果浏览器中访问http://localhost:92 ...

  2. [转]掌握 Dojo 工具包，第 2 部分: XHR 框架与 Dojo

    作者:secooler 快乐的DBA Ajax 的兴起改变了传统的 B/S 结构应用程序中以页面为单位的交互模式,Ajax 引入的局部刷新机制带来了更好的用户体验,促使浏览器中的页面开始向应用程序发展 ...

  3. P3434 [POI2006]KRA-The Disks

    题目描述 For his birthday present little Johnny has received from his parents a new plaything which cons ...

  4. hihocoder 1320 压缩字符串（字符串+dp）

    题解: 其实就是对应三种dp的转移方式 1.拼接类型 dp[i][j] = dp[i][c] + dp[c][j] 2.不变类型 dp[i][j] = j-i+1 3.重复类型(必须满足有k个循环节) ...

  5. 一个JavaScript反射使用的例子

    反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够在运行时知道自己有哪些方法和属性.在JavaScript中有一个很方便的语法来实现反射,即for(…in…)语句,其语法如下: 1 for ...

  6. P2765 魔术球问题（网络流24题）

    题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...

  7. Array.slice(start,end)的用法

    start在start>=0,假设start=0,表示从数组的第一个元素开始截取,start=2,表示从数组的第二个元素开始截取,依次类推. 在start<0时,start=-1表示从倒数 ...

  8. Ubuntu14.04 换源 阿里云

    sudo cp /etc/apt/sources.list /etc/apt/sources.list_backup sudo vim /etc/apt/sources.list sudo apt-g ...

  9. Java拷贝构造函数初尝试

    浅复制(浅克隆) :被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. 深复制(深克隆) :被复制 ...

  10. pageContext对象的用法详述

    pageContext对象  这个对象代表页面上下文,该对象主要用于访问JSP之间的共享数据. pageContext是PageContext类的实例,使用pageContext可以访问page.re ...