参考：慕课网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. 【历史】- Unix英雄传：图文细数十五位计算机先驱

    Unix,一款多任务多用户操作系统,最早由AT&T公司员工及合作伙伴在贝尔实验室于1969年开发完成.Unix的衍生及克隆版本包括Berkeley Unix.Minix.Linux.AIX.A ...

  2. Access-Control-Allow-Methods: OPTIONS & CORS

    Access-Control-Allow-Methods: OPTIONS CORS https://stackoverflow.com/questions/20478312/default-valu ...

  3. Delphi组件开发教程指南目录

    用Delphi开发的时间也不短了!刚接触Delphi的时候,就觉得组件这个东西非常方便!根本不必知道组件内部的作为,只要使用就好了!然而用的多了,也不免会对各种delphi组件的内部实现方式产生兴趣! ...

  4. typescript 简版跳一跳

    typescript 简版跳一跳 学习typescript,第一步应该是学习官方文档,理解最基础的语法.第二步开始用typescript实现一些js+css 或者canvas类型的游行.现在开始我们用 ...

  5. ARC078 D.Fennec VS. Snuke（树上博弈）

    题目大意: 给定一棵n个结点的树 一开始黑方占据1号结点,白方占据n号结点 其他结点都没有颜色 每次黑方可以选择黑色结点临近的未染色结点,染成黑色 白方同理. 最后谁不能走谁输. 题解: 其实简单想想 ...

  6. Contest Hunter 模拟赛09 C [树形dp+差分]

    题面 传送门 思路 又双叒叕是一道差分题我没想出来......记录一下 首先这个"所有祖先都比自己小"等价于"父亲比自己小" 这题的基础dp方程很显然,$dp[ ...

  7. EOS docker开发环境

    EOS Wiki提供了有关如何使用docker容器编译最新版本代码的说明.但可能有它自己的一些问题,因此我们鼓励你在学习时引用下面镜像.这样最初会更容易,更快. 如果你还没有安装docker,请在此处 ...

  8. [Leetcode] Convert sorted list to binary search tree 将排好的链表转成二叉搜索树

    ---恢复内容开始--- Given a singly linked list where elements are sorted in ascending order, convert it to ...

  9. 使用setTimeout延时10ms执行onunloadcancel

    在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器.如果用户选择了离开,那么onunload事件自然会触发:但若用户选择了取 ...

  10. Wpremig和Jhadgre的藏宝图（最大流+二分）

    Wpremig和Jhadgre的藏宝图 题目链接:https://ac.nowcoder.com/acm/contest/333/M Description: Jhadgre在生日那天收到了一张神秘的 ...