<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <style type="text/css">
      *{
         margin: 0;
         padding: 0;
         list-style: none;
      }
      .echo{
         width: 400px;
         min-height: 260px;
         background: pink;
         position: absolute;
      }

      .echo .title{
         font: 18px/40px "微软雅黑";
         background: #f7f7f7;
         padding:0 40px;
         color: #666;
         cursor: move;
      }

      .echo .title i{
         float: right;
         font:18px/40px "宋体";
         margin-right: -27px;
      }
   </style>
   <body>
      <div class="echo">
         <h2 class="title">注册<i>&times;</i></h2>
      </div>
   </body>
   <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">

      //1.获取元素

      var echo = $('.echo');

      var title = echo.children('.title');

      var x = 0;

      var y = 0;

      var off = 0;//拖动开关 0关闭 1开启

      //2.添加鼠标按下事件

      title.mousedown(function(e){

         //3.根据鼠标的位置-盒子的位置得到鼠标与盒子之间的差值   这个值在移动的过程中不会改变

         x = e.clientX - echo.offset().left;

         y = e.clientY - echo.offset().top;

         off = 1;

      }).mousemove(function(e){

         //阻止拖动过程中文字被选中
         window.getSelection ? window.getSelection().removeAllRanges() : window.document.selection.empty();

         //4.添加鼠标移动事件   如果开关关闭直接终止

         if(!off){

            return ;
         }

         var left = e.clientX - x;

         var top1 =e.clientY - y;

         //4.1可以自己定条件限制移动的范围

         top1 = top1 <0 ? 0 : top1;

         left = left<0 ? 0 : left;

         left = left > $(window).width() - echo.width() ? $(window).width() - echo.width() : left;

         //5.根据鼠标的位置减当初的差值计算出 盒子移动的位置

         echo.css({left:left,top:top1});

      }).mouseup(function(){

         //鼠标抬起关闭开关

         off = 0;

      }).mouseout(function(){

         off = 0;

      })

   </script>
</html>

js窗口拖动 模版的更多相关文章

  1. 基于jQuery页面窗口拖动预览效果

    今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  2. Duilib改进窗口拖动，使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  3. duilib进阶教程 -- 改进窗口拖动 (12)

    现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...

  4. Winform 窗口拖动

    把窗口边框去掉后,窗口拖动问题: private Point mouseOffset; //记录鼠标指针的坐标 private bool isMouseDown = false; //记录鼠标按键是否 ...

  5. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  6. 29.QT-自定义窗口拖动、自定义QToolButton/QPushButton开关按钮、界面阴影,声音等总结

    自定义窗口及拖动 1.自定义无边框窗口时,需要将窗口标志设为: Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMax ...

  7. JS实现拖动div层移动

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

  8. VUE.JS 窗口发生变化时，获取当前窗口的高度。

    VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...

  9. 利用SendMessage实现窗口拖动

    原文:利用SendMessage实现窗口拖动 利用SendMessage实现窗口拖动                                            周银辉 想想以前用跟踪鼠标位 ...

随机推荐

  1. 30分钟带你了解Docker

    最近一直在忙项目,不知不觉2个多月没有更新博客了.正好自学了几天docker就干脆总结一下,也顺带增加一篇<30分钟入门系列>.网上能够查到的对于docker的定义我就不再重复了,说说我自 ...

  2. SQL Timeout超时的处理方法

    第一步:修改Web.config配置文件.在数据库连接字符串中加上连接时间Connect Timeout,根据实际情况定时间. <!--连接数据库--> <connectionStr ...

  3. Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装

    Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装 你们可以直接去,http://blog.csdn.net/wei_chong_chong/ar ...

  4. [Java学习] Java虚拟机(JVM)以及跨平台原理

    相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的. 那么,跨平台是怎样实现的呢?这就 ...

  5. codeforces 700a//As Fast As Possible// Codeforces Round #364(Div. 1)

    题意:n个人要运动ll长,有个bus带其中几个人,问最短时间 最后所有人在同一时间到终点是用时最少的.由于搭bus相当于加速,每个人的加速时间应该一样.先计算bus走过的路程route.看第一个人被搭 ...

  6. php项目------浏览器导航开发

    最近项目不是很急,把以前做的php项目分享一些给大家,希望对各位有所帮助:很简单的一个项目,本人用来练习ThinPHP框架的. 浏览器导航开发,php+mysql+apache,ThinkPHP3.2 ...

  7. Travelling Salesman and Special Numbers CodeForces - 914C (数位dp)

    大意: 对于一个数$x$, 每次操作可将$x$变为$x$二进制中1的个数 定义经过k次操作变为1的数为好数, 求$[1,n]$中有多少个好数 注意到n二进制位最大1000位, 经过一次操作后一定变为1 ...

  8. 『cs231n』视频数据处理

    视频信息 和我之前的臆想不同,视频数据不仅仅是一帧一帧的图片本身,还包含个帧之间的联系,也就是还有一个时序的信息维度,包含人的动作判断之类的任务都是要依赖动作的时序信息的 视频数据处理的两种基本方法 ...

  9. darktrace 亮点是使用的无监督学习（贝叶斯网络、聚类、递归贝叶斯估计）发现未知威胁——使用无人监督 机器学习反而允许系统发现罕见的和以前看不见的威胁，这些威胁本身并不依赖 不完善的训练数据集。 学习正常数据，发现异常！

    先说说他们的产品:企业免疫系统(基于异常发现来识别威胁) 可以看到是面向企业内部安全的! 优点整个网络拓扑的三维可视化企业威胁级别的实时全局概述智能地聚类异常泛频谱观测 - 高阶网络拓扑;特定群集,子 ...

  10. jsonp 遍历文档

    遍历文档 将html解析成一个Document后,就可以使用类似Dom的方法进行操作 File input = new File("/tmp/input.html"); Docum ...