重点是弄清楚如何获取鼠标现位置与移动后位置，div现在位置与移动后位置：

用jQuery实现div随鼠标移动而移动，不是鼠标自身的位置！！而是div相对于之前位置的移动

代码如下：（注意看绿色部分的解释）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="{utf-8}">
  5.         <title></title>
  6.         <script src="../jquery-3.2.0.js"></script>
  7.         <style>
  8.             .aa{
  9.                 height: 100px;
  10.                 width: 200px;
  11.                 position: absolute;
  12.                 background-color: green;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="aa"></div>
  18.     </body>
  19. </html>
  20. <script>
  21.     $(".aa").mousedown(function(e){
  22.         //设置移动后的默认位置
  23.         var endx=0;
  24.         var endy=0;
  25.         //获取div的初始位置，要注意的是需要转整型，因为获取到值带px
  26.         var left= parseInt($(".aa").css("left"));
  27.         var top = parseInt($(".aa").css("top"));
  28.         //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
  29.         var downx=e.pageX;
  30.         var downy=e.pageY;     //pageY的y要大写，必须大写！！
  31.      //    鼠标按下时给div挂事件
  32.     $(".aa").bind("mousemove",function(es){
  33.         //es.pageX,es.pageY:获取鼠标移动后的坐标
  34.         var endx= es.pageX-downx+left;     //计算div的最终位置
  35.         var endy=es.pageY-downy+top;
  36.         //带上单位
  37.         $(".aa").css("left",endx+"px").css("top",endy+"px")
  38.     });
  39.   })
  40.     
  41.     $(".aa").mouseup(function(){
  42.         //鼠标弹起时给div取消事件
  43.         $(".aa").unbind("mousemove")
  44.     })
  45.  
  46. </script>

区别于下面这段代码：(最终实现效果是div随鼠标位置移动，具体效果想看的可以粘贴复制对比看看差距在哪)

  1. 	<script>
  2. $(".aa").mousedown(function(e){
  3. 	$(document).bind("mousemove",function(e){
  4. 		$(".aa").css("left",e.pageX).css("top",e.pageY)
  5. 	});
  6. })
  7. 	$(".aa").mouseup(function(){
  8. 		$(document).unbind("mousemove")
  9. 	})
  10. 	</script>

　　

如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12的更多相关文章

  1. 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  2. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  3. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  4. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  5. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  6. jquery.tmpl.min.js--前端实现模版--数据绑定--详解

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  7. JQuery解析HTML、JSON和XML实例详解

    1.HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中. fragment.html文件,其内容: 复制代码 ...

  8. Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...

  9. JQuery中的load()、$.get()和$.post()详解 （转）

    load() 1.载入HTML文档 load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中. 它的结构为: load(url [,data][,callba ...

随机推荐

  1. C# 连接 access2010数据库

    //定义一个新的OleDb连接 System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(); // ...

  2. C# 查找、结束进程 - 通过进程名精确、模糊查找、结束进程

    /// <summary> /// 根据“精确进程名”结束进程 /// </summary> /// <param name="strProcName" ...

  3. Reducing the Dimensionality of Data with Neural Networks：神经网络用于降维

    原文链接:http://www.ncbi.nlm.nih.gov/pubmed/16873662/ G. E. Hinton* and R. R. Salakhutdinov .   Science. ...

  4. C#访问Win 32的一些尝试

    使用C#调用Win 32 Api大部分情况下基本只涉及到参数类型的转变,但在遇到Win 32 Api返回LPVOID *lpBuff 时会遇到一些解析遍历难题.lpBuff为二维指针,*lpBuff是 ...

  5. String类的特点和使用步骤

    概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如 "abc" )都可以被看作是实现此类的实例 类 String 中包括用于检查各个字符串的 ...

  6. ubuntu18.0安装RabbitMQ

    RabbitMQ是一个消息队列,用于实现应用程序的异步和解耦.生产者将生产消息传送到队列,消费中从队列中拿取消息并处理.生产者不用关心是谁来消费,消费者不用关系是谁在生产消息,从而达到解耦的目的.本文 ...

  7. Python 切片 day3

    你可以处理列表的部分元素——Python称之为切片 . 一.使用方法: 要创建切片,可指定要使用的第一个元素和最后一个元素的索引. 与函数range() 一样,Python在到达你指定的第二个索引前面 ...

  8. opencv(一）下载安装

    1.visual studio 工具---Nugget包管理器---管理解决方案的Nugget程序包 搜索opencv,点击安装 下载地址: 1.http://opencv.org/ 2.https: ...

  9. 50.常用的query查询方式

    主要知识点 match all match multi match range query term query terms query exist query         1.match all ...

  10. PHP学习总结（13）——PHP入门篇之常量

    1.什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量(后续小节会详细介绍). 自定义常量是 ...