<!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. orcal 锁表

    --查询Oracle正在执行的sql语句及执行该语句的用户 SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, ...

  2. 2018.11-2019.1的随记|NOIP的考后随记

    就是日记吧?(这里就是写一些乱七八糟的东西qwq,当作自己的零散想念吧 1.24 今天跟着BLUESKY他们的视频一起领略了一下远在广州的CCF冬令营开幕式,看着ljh的拍的照片也体验了一下RM冬令营 ...

  3. 透明数据加密 (TDE)常见问题解答

    透明数据加密 (TDE)常见问题解答问题任何人只要有权访问加密数据就能对其进行解密吗?TDE 会带来哪些开销?哪些加密算法可与 TDE 一同使用?可以使用第三方加密算法代替 TDE 提供的算法吗?可以 ...

  4. “全栈2019”Java第三十五章：面向对象

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. php对象在内存中存在形式

    1,php中基本数据类型存在于栈区,对象这种数据类型存在于堆区: 比如如下代码,两个指针指向同一个对象,其输出相同 <?php /** * Created by PhpStorm. * User ...

  6. [sloved] IDE JavaServlet "Error: Could not find or load main class Servlet"

    [ sloved ] JavaServlet "Error: Could not find or load main class Servlet" 报错内容: 提供一份 Servl ...

  7. 简单的数字校验JS

    /** *张衍涛 * 数字校验 v:校验的元素 l:要保留的小数点位数 */ function checkNumber(v,l){ var val=v.value; if(isNaN(val) || ...

  8. spring quartz 的定时器cronExpression表达式写法（转载）

    转载来源:https://zhidao.baidu.com/question/240797777248343764.html====================================== ...

  9. web 应用的部署

    一.项目管理 : zentao(国产开源),其他 project.redmine.trac 二.自动部署: jenkins:自动化配置 docker:容器,类似虚拟机,不过只是本机系统的内核的一个虚拟 ...

  10. 【算法笔记】B1040 有几个PAT

    1040 有几个PAT (25 分) 字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 ...