参考：慕课网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. 【bzoj4817】[Sdoi2017]树点涂色 LCT+LCA+线段树

    题目描述 给出一棵n个点,以1为根的有根树,每个点初始染有互不相同的颜色.定义一条路径的权值为路径上的颜色种类数.现有m次操作,每次操作为以下三种之一: 1 x: 把点x到根节点的路径上所有的点染上一 ...

  2. BZOJ4477 JSOI2015字符串树（可持久化trie）

    树上建可持久化trie即可,有点过于裸了.darkbzoj过了然而在bzoj一直wa,不知道哪有锅. #include<iostream> #include<cstdio> # ...

  3. UDP收/发广播包原理及步骤

    原文链接地址:http://www.2cto.com/net/201311/254834.html UDP收/发广播包原理及步骤 如果网络中两个主机上的应用程序要相互通信,其一要知道彼此的IP,其二要 ...

  4. [Leetcode] The minimum depth of binary tree二叉树的最小深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  5. 部分经典IT书籍

    部分经典IT书籍 [系统,网路管理]1) Learning the Unix Operating System 1565923901 O'reilly/1997-4ed ***强力推荐给想入门unix ...

  6. BZOJ 3262: 陌上花开 CDQ

    这个题大部分人用了离散然后水之,然而.....作为一只蒟蒻我并没有想到离散,而是直接拿两个区间一个对应n,一个对应k来搞,当然这两个区间是对应的,我把第一维排序,第二维CDQ,第三维树状数组,然而由于 ...

  7. Educational Codeforces Round 55 (Rated for Div. 2)：E. Increasing Frequency

    E. Increasing Frequency 题目链接:https://codeforces.com/contest/1082/problem/E 题意: 给出n个数以及一个c,现在可以对一个区间上 ...

  8. js中的Map对象的简单示例

    es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...

  9. java属性为什么没多态，而是方法多态

    定义 java多肽的特性:方法具有多态性,属性却没有. 准备 基类: 子类: 测试类: 结果: 分析如下 父类 a=new 子类,实际对象时子类.由于向上转型,我们可以用父类在编译期间代替子类,使得编 ...

  10. 51nod K 汽油补给 大根堆+小根堆....

    题目传送门 用优先队列瞎搞... 想着在每个地方 先算上一个点到这一个点要花费多少钱 这个用小根堆算就好 然后在这个地方加油 把油钱比自己多的替代掉 这个用大根堆维护一下 然后两个堆之间信息要保持互通 ...