<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-3.2.1.js" type="text/javascript"></script>

     <style>

         .box{

             width: 600px;

             position: absolute;

             border: 2px red solid;

             top: 50px;

             left: 50px;

         }

         .title{

             height: 100px;

             background-color: #7b7b7b;

             border: 2px red solid;

             cursor: move;

         }

         .text{

             height: 500px;

             background-color: #3075dc;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="title">标题</div>

         <div class="text">内容</div>

     </div>

 <script>

     $(".title").bind("mousedown",function (event) {

         var start_x=event.screenX;

         var start_y=event.screenY;

         var box_left=$(this).parent().offset().left;

         var box_top=$(this).parent().offset().top;

         $(".title").on("mousemove",function (event) {

             var new_x=event.screenX;

             var new_y=event.screenY;

             var new_box_left=new_x-start_x+box_left;

             var new_box_top=new_y-start_y+box_top;

             $(".box").css("left",new_box_left+"px").css("top",new_box_top+"px");

         }).mouseup(function () {

             $(".title").off("mousemove")

        })

     })

 </script>

 </body>

 </html>
先把需求的html做出来基本样式

　　

我们的需求是鼠标移动到灰色标题框,移动到上面的时候,变成移动的图像.  鼠标左键点击区域后按着然后移动就可以拖住整个区域移动.

1,鼠标变成移动图像:可以绑定事件改变属性,或者如此例所写 ,直接在title 的css里加入corsor:move;

2, 点击后可以拖住移动,首先我们要建立一个mousedown事件.绑定到title里.然后利用event.screenX 和event.screenY 得出点击的点和window的left,top值.

　　evnet.screentX=start_left      初始(上一次)点击的位置与 左边的距离

　　evnet.screentY=start_top      初始(上一次)点击的位置与 顶边的距离

　　然后再通过offset() 得此时出边框离窗口的距离

   .offset().left;
   .offset().top;

　我们还需有个移动事件,这时候我们也会要给title 去绑定, 但是请注意 :  我们移动事件是在鼠标被点击后才能移动拖着跑的. 所以这个绑定还是要放到 mousedown 函数里去写 mouseover
　　
　　移动后我们需要获title的 event.screenX 和 event.screenY 
　　

　　evnet.screentX=new_left      现在点击的位置与 左边的距离

　　evnet.screentY=new_top      现在点击的位置与 顶边的距离

　用现在的移动后的x坐标和y距离(new)减去开始的x , y; 
　让整个元素的left加上x的差值,top加上y的差值
  var new_box_left = new_x-start_x+box_left;

  var new_box_top = new_y-start_y+box_top;

　　并修改box的css样式
　　$(".box").css("left",new_box_left+"px").css("top",new_box_top+"px");
　　

3. 这时候我们基本上就能够实现拖动了,但是我们发现还有另外一个问题就是 点击过后就可以拖着移动,即使松开鼠标都可以拖住.这是因为我们的mousedown已经被触发了.我们还没有mouseup的事件.
　　这时候就需要用链式方法紧mousedown后 (注意不要写到里面去了)跟再绑一个事件:
　　
　　　　$(".title").off("mousemove")

   这里用的是off去解除之前监听的mouseover事件
 
 

jQuery 小练习-拖拉画面的更多相关文章

  1. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

  2. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  3. 人人必知的10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...

  4. 程序员都会的 35 个 jQuery 小技巧

    收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...

  5. jQuery小例

    jQuery小例子 使用前,请先引用jquery 1,map遍历数组   2,jQuery对象与DOM对象才做元素和互转 3,prevall与nextall 4,jquery版的星星评分控件 5,jq ...

  6. 几个 jQuery 小提示和技巧

    几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...

  7. 必知的 15 个jQuery小技巧（干货）

    jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...

  8. 黑色半透明镂空遮罩指引效果实现jQuery小插件

    /*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...

  9. (网页)人人都会的35个Jquery小技巧

    转自CSDN: 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(&q ...

随机推荐

  1. leetcode 有效的数独

    判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...

  2. c#设计模式之：外观模式（Facade）

    一.引言 在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ...

  3. WebSerervice webapi使用

    WebSerervice  webapi使用 1.传json参数: 2.返回json数据: 3.权限控制: Authorize特性:必须经过认证,请求头必须具有token信息 4.路由: 5.过滤器: ...

  4. APIO2014 连珠线

    题目链接:戳我 换根DP 由于蒟蒻不会做这个题,所以参考了大佬. 本来想的是有三种情况,一种是该节点不作为两个蓝线的中点(我们称这种不是关键节点),一种是该节点作为关键点.连两个子节点,一种是作为关键 ...

  5. [AIR] AS3读取本地文件夹中的文件

    import flash.filesystem.File; import flash.net.URLLoader; //var dir:File = File.desktopDirectory; // ...

  6. POJ-3126-Prime Path（BFS）

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27852   Accepted: 15204 Desc ...

  7. 在Grafana中可视化Jenkins管道结果

    这次我描述了一些稍微轻松的话题,与之前的一些帖子相比.就个人而言,我认为Grafana是一个非常酷的工具,用于可视化任何时间轴数据.事实证明,使用InfluxDB插件存储和可视化Jenkins构建结果 ...

  8. JAVA数据结构--哈希表的实现（分离链接法）

    哈希表(散列)的定义 散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度 ...

  9. 论文阅读 | CenterNet：Object Detection with Keypoint Triplets

    相关链接 论文地址:https://arxiv.org/abs/1904.08189 代码链接:https://github.com/Duankaiwen/CenterNet 概述 CenterNet ...

  10. ios模拟器安装测试包方法

    1. 使用ios-sim ios-sim是一个可以用命令空着ios模拟器的工具.利用这个命令,我们可以启动模拟器.安装app.启动app.查询ios sdk,它可以使我们像自动化测试一样打开xcode ...