如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置，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的更多相关文章
- 如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- jquery.tmpl.min.js--前端实现模版--数据绑定--详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- JQuery解析HTML、JSON和XML实例详解
1.HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中. fragment.html文件,其内容: 复制代码 ...
- Jquery中"$(document).ready(function(){ })"函数的使用详解
Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...
- JQuery中的load()、$.get()和$.post()详解 （转）
load() 1.载入HTML文档 load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中. 它的结构为: load(url [,data][,callba ...
随机推荐
- 苹果ATS特性服务器证书配置指南
配置指南: 需要配置符合PFS规范的加密套餐,目前推荐配置: ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!AD ...
- JavaScript如何一次性展示几万条数据
有一位同事跟大家说他在网上看到一道面试题:“如果后台传给前端几万条数据,前端怎么渲染到页面上?”,如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成 ...
- Zkui安装
是一个允许在zookeeper上进行增删查改操作的图形管理工具,与zkdash类似. 1.拉取代码 #git clone https://github.com/DeemOpen/zkui.git 2. ...
- 2017-3-28 JavaScript 基础、语法
前端三剑客: html+css+js(html 决定网页上有什么,css决定东西是怎么摆放的,js决定东西的功能) js定义: js是一个脚本语言,需要有宿主文件,它的宿主文件是html文件. js ...
- sql server 重命名列（字段）
调用系统存储过程sp_rename,直接看代码: EXEC sp_rename 'myTable.oldName','newName','COLUMN' 如果重命名表,则: EXEC sp_re ...
- JDK动态代理实现机制
=========================================== 原文链接: JDK动态代理实现机制 转载请注明出处! =========================== ...
- 老李分享：接电话扩展之uiautomator 1
老李分享:接电话扩展之uiautomator poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...
- 测试开发Python培训：实现屌丝的图片收藏愿望（小插曲）
测试开发Python培训:实现屌丝的图片收藏愿望(小插曲) 男学员在学习python的自动化过程中对于爬虫很感兴趣,有些学员就想能收藏一些图片,供自己欣赏.作为讲师只能是满足愿望,帮助大家实现对美的追 ...
- Java第二章 变量
1.什么是变量? 存储数据的基本单位. 2.数据类型分为: 基本类型和引用数据 3.基本数据类型和引用数据类型的区别: 基础数据:不同的变量会分配不同的存储空间,改变一个变量不会影响另一个变量 引用数 ...
- 达到工业使用质量级别的类似于QQ截屏的软件
到网上查找截屏发现基本都是一些小孩子的初级玩意,功能强大一点的又没有源代码所以自己花了三四天时间写了一个能达到工业使用质量级别的截图控件. 优点:1.代码量小只有1500行代码 2.结构清晰简单极易于 ...