<html>
<meta>
<script src='jquery-1.8.3.min.js'></script>
<script>
/*
e.clientX:相对于客户区域的X坐标位置数值，不包括滚动条，就是正文区域
e.pageX:事件执行时获取鼠标的坐标，就是事件触发源的坐标
scrollLeft：返回或设置匹配元素的滚动条的水平位置
dom.offsetLeft：以自身坐标为基本的到父窗口的左边距，返回数值，
dom.top：以父对象为坐标基准，返回文本，后面带px这样的单位
*/
$(function(){
//当鼠标点击后执行
$("#dragDemo").mousedown(function(e){
var drag=false;
//获取起始位置
x=e.clientX-$(this).get(0).offsetLeft;
y=e.clientY-$(this).get(0).offsetTop;
//移动时改变
$(this).mousemove(function(e){
if(!drag){
$(this).css("position","absolute");
$(this).css("top",e.clientY-y+"px");
$(this).css("left",e.clientX-x+"px");
}
})
//鼠标松开时执行
$(this).mouseup(function(){
drag=true;
});
});
 
});
</script>
</meta>
<body>
<div id="dragDemo" style="border:1px solid #ccc;width:400px;height:200px;"></div>
</body>
</html>
 
有个问题，不是很清楚获取位置的方法，希望理解透切的程序员画张图出来，区分clientX,top,pageX,........等位置

js图片拖放原理(很简单，不是框架，入门基础)的更多相关文章

  1. extern的原理很简单，就是告诉编译器：“你现在编译的文件中，有一个标识符虽然没有在本文件中定义，但是它是在别的文件中定义的全局变量，你要放行！”

    extern的原理很简单,就是告诉编译器:“你现在编译的文件中,有一个标识符虽然没有在本文件中定义,但是它是在别的文件中定义的全局变量,你要放行!”

  2. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  3. 带你彻底理解RSA算法原理,很简单的

    1. 什么是RSA RSA算法是现今使用最广泛的公钥密码算法,也是号称地球上最安全的加密算法. 在了解RSA算法之前,先熟悉下几个术语 根据密钥的使用方法,可以将密码分为 对称密码 和 公钥密码 对称 ...

  4. js拖拽原理及简单实现(渣渣自学)

    第一步 首先简单分析下需求吧,我们就是想实现鼠标拖拽带颜色的方块时,让方块停留在鼠标松开的位置,需要计算的就是拖拽前的坐标和拖拽后的坐标,鼠标移动后相对于原位置的偏移量=目标元素的偏移量,根据这个等式 ...

  5. createjs easal.js制作了一个很简单的链路图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  7. php基础知识（很简单一套适合零基础的朋友学习）

    红色的一般都是重点,还有自己的一些废话 运算符 算术运算符: 基本运算(除数不能为0) 比较运算符: 大小比较(类型比较), 如果两个类型不一样,系统会自动转换成统一类型 赋值运算符: 基本赋值和运算 ...

  8. js简单日期获取( 菜鸟入门基础)

    关于js日期的获取要用到最基本的Date()方法获取当日的日期 var d =new Date();  //定义日期对象 var y=d.getFullYear();   //获取年 var m=d. ...

  9. 【转】最简单的CI框架入门示例--数据库取数据

    1.下载CI框架(自己找) 2.配置 database.php配置:    为数据库服务器设置 connection 参数: $db['default']['hostname'] = "yo ...

随机推荐

  1. JSON方式提交文档时SOLR报：AtomicUpdateDocumentMerger Unknown operation for the an atomic update, operation ignored

    文档是数组转成的json 原数组: array( 0 =>3, 1 =>3, 2 =>4, 3 =>5, 4 =>5, 5 =>6) 用array_unique去掉 ...

  2. 部署wcf到IIS时的问题

    1,部署到IIS后,在浏览器可以访问.但客户端添加服务引用时,出现错误: - 下载“http://admin-pc/IISHostService/Service1.svc?xsd=xsd0”时出错.- ...

  3. java回调初步学习

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢以前不理解什 ...

  4. DuiLib 源码分析之解析xml类CMarkup & CMarkupNode cpp文件

    时隔5个月才有时间接着写未完成的实现部分,也是惭愧呀 选几个关机的函数来解析,一些get方法就忽略掉吧 CMarkupNode 与 CMarkUp 互为友元类,CMarkUp 实现解析,CMarkup ...

  5. 转载分享----一线交付眼中的为何"项目总是迟迟无法交付”

    当初博主在一线交付BOSS系统中承担过TC角色 交付的路途很艰辛,加班到10点多或1点多第二天8点上班,还有通宵的日子 还有无数个问题从开始到关闭的周期,各种催人,各种掐架拉会,各种被甲方嫌弃 看到这 ...

  6. （转）pymysql 连接mysql数据库---不支持中文解决

    往数据库里插入中文时出现异常:UnicodeEncodeError: 'latin-1' codec can't encode characters 就是编码的问题,pymysql默认的编码是lati ...

  7. PHP动态实例化对象并向构造函数传递参数

    在框架开发,模块化开发等场合,我们可能有一种需求,那就是在PHP运行时动态实例化对象. 什么是动态实例化对象呢?我们先来看一下PHP有一种变量函数(可变函数)的概念,例如如下代码: function ...

  8. NFC

    NFC手机是指带有NFC模块的手机.带有NFC模块的手机可以做很多相应的应用.NFC是Near Field Communication缩写,即近距离无线通讯技术.在13.56MHz频率运行于20厘米距 ...

  9. 理解tcp协议的3次握手和面向连接

    1.tcp是有连接的, 这个不是说他有个实际的连接,这个是个虚拟的连接,连接的保持信息不是由连接的路线来保存的,他是由连接的两方来保存其状态信息,这就是面向连接的, 2.tcp要3次握手: 客户端发给 ...

  10. Address already in use: JVM_Bind:8080 的解决办法<转>

    出错情况:运行 Tomcat 时报错 含义:8080 位置显示的端口被其他进程占用 解决方法: 方法1: 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID ...