要实现移动窗体,首先要捕获三个参数:
1、a = 鼠标点击时的坐标。
2、b = 被移动窗体的左顶点坐标。
3、c = 鼠标移动时的坐标。
然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗体左顶点的坐标),计算公式:
d = c - a + b;

因为移动窗体的原理就是改变窗体的左顶点坐标值,计算出上面的坐标公式后,剩下的就是在鼠标移动事件里添加修改窗体左顶点top和left数值的方法。

JS拖动div的原理的更多相关文章

  1. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. JS 拖动DIV 需要JQUERY 支持

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  4. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  5. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  6. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  7. [可拖动DIV]刚开通博客顺便就写了点东西!

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  8. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

  9. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

随机推荐

  1. 初学scala1——Option

    Scala的Option[T]是容器对于给定的类型的零个或一个元件.Option[T]可完美替代Java中的null,可以是Some[T]或者None. 例如,Scala Map的get方法输出即为O ...

  2. tcpdump抓包以及port查看的一些操作

    1.tcpdump. nginx开启后会占用80端口,此时运行命令:tcpdump tcp port 80 结果例如以下: [syswj@host ~]$ sudo tcpdump tcp port ...

  3. oracle添加数据时主键自动增长

    CREATE TABLE STUDENT( --创建学生表  ID NUMBER(10) PRIMARY KEY,   --主键ID  SNAME VARCHAR2(20), ); 此时给学生表添加数 ...

  4. colspan是跨列,rowspan是跨行

    colspan是跨列,rowspan是跨行,可以看作是网页设计表格中的列和行的一个属性.跨列相当于把两列或者多列合并成一个单元格:跨行同理是把两行或者多行合并成一行:colspan和rowspan分别 ...

  5. [转帖]SD卡&FLASH&USB

    来源:http://www.cypress.com Cypress官网,了解任何芯片都应该从它的官网入手,资料一定是最多最原始的,像Ronnie学习. Cypress’s EZ-USB® FX2LP™ ...

  6. 内存泄漏在 WPF 和 Silverlight 提防

    瑞奇韭菜礼物 ︰ 内存泄漏在 WPF 和 Silverlight 提防 内存泄漏在 WPF 和 Silverlight 提防 WPF 和 Silverlight 允许您定义您的用户界面,用最少的代码将 ...

  7. Tomcat下work文件夹的作用

    1.打补丁,重启tomcat时要删除work文件夹,有缓存. 2.work目录只是tomcat的工作目录,也就是tomcat把jsp转换为class文件的工作目录 jsp,tomcat的工作原理: 当 ...

  8. JavaScript Boolean(布尔) 对象

    创建 Boolean 对象 Boolean 对象代表两个值:"true" 或者 "false" 下面的代码定义了一个名为 myBoolean 的布尔对象: va ...

  9. MVC5+EF6 入门完整教程一

    第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定" 会让人困惑,而且东西太多容易忘记 ...

  10. Xaml中的资源(1 样式)

    <Window x:Class="MyResoures.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...