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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="{utf-8}">

        <title></title>

        <script src="../jquery-3.2.0.js"></script>

        <style>

            .aa{

                height: 100px;

                width: 200px;

                position: absolute;

                background-color: green;

            }

        </style>

    </head>

    <body>

        <div class="aa"></div>

    </body>

</html>

<script>

    $(".aa").mousedown(function(e){

        //设置移动后的默认位置

        var endx=0;

        var endy=0;

        //获取div的初始位置，要注意的是需要转整型，因为获取到值带px

        var left= parseInt($(".aa").css("left"));

        var top = parseInt($(".aa").css("top"));

        //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY

        var downx=e.pageX;

        var downy=e.pageY;     //pageY的y要大写，必须大写！！

     //    鼠标按下时给div挂事件

    $(".aa").bind("mousemove",function(es){

        //es.pageX,es.pageY:获取鼠标移动后的坐标

        var endx= es.pageX-downx+left;     //计算div的最终位置

        var endy=es.pageY-downy+top;

        //带上单位

        $(".aa").css("left",endx+"px").css("top",endy+"px")

    });

  })

    

    $(".aa").mouseup(function(){

        //鼠标弹起时给div取消事件

        $(".aa").unbind("mousemove")

    })

</script>

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

	<script>

$(".aa").mousedown(function(e){

	$(document).bind("mousemove",function(e){

		$(".aa").css("left",e.pageX).css("top",e.pageY)

	});

})

	$(".aa").mouseup(function(){

		$(document).unbind("mousemove")

	})

	</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. 【SQL】字符型函数

    1. ASCII ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统. 1) 返回 ...

  2. c++ 枚举与字符串 比较

    读取字符串,然后将这个字符转换为对应的枚举. 如:从屏幕上输入'a',则转换为set枚举中对应的a,源代码如下: //关键函数为char2enum(str,temp); #include using ...

  3. HDU_3999_二叉排序树

    The order of a Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. 新浪某个tab 页模仿

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Nginx服务器部署SSL证书手机不信任解决方法

    在wosign申请证书并按指南正确部署证书后,如果发现PC浏览器访问正常,手机或safari浏览器提示证书不受信任,那肯定是在文件传输解压过程中导致证书文件中出现空格.乱码之类的情况,这里教您轻松四步 ...

  6. emmmmmm（官宣？）

    实验室永远不会是学习的唯一地点,不是吗? 总后悔当初退竞赛,现在却还是选择退出,大概是自己真的不适合吧...

  7. [bzoj3029] 守卫者的挑战 (概率期望dp)

    传送门 Description 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我,Nizem,是黑魔法圣殿的守 ...

  8. [POJ2404]Jogging Trails

    我太弱了. 我们可以知道一个结论就是对于一个图的话假如所有点的度数都是偶数,那么只需要走一波欧拉回路. 所以我们就把奇点补成偶点. 将两个奇点补充到偶点的最佳方法是选择任意两个奇点连最短路径为权的边 ...

  9. [CodeForces]1042D

    大意:求一个序列有几个子序列的和小于给定值,里面的数有正有负,序列长度≤200000. 列个式子,其实求的是sum[r]-sum[l-1]<T sum[r]-T<sum[l-1] 所以我们 ...

  10. Hexo系列(三) 常用命令详解

    Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...