jq 块的拖拽效果
2016-03-10 00:11
387 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; } </style> <script src="jquery-2.2.1.min.js"></script> <script> $(function(){ var disx = 0; var disy = 0; $("div").mousedown(function(ev){ disx = ev.pageX - $(this).offset().left;//鼠标点击到块边缘的距离 进行记录 当块移动后用鼠标的位置-到块的距离= 块定位的距离 disy = ev.pageY - $(this).offset().top; //给document加事件 鼠标怎么也不会脱离 $(document).mousemove(function(ev){ $("div").css("left",ev.pageX - disx); $("div").css("top",ev.pageY - disy); }) $(document).mouseup(function(){ $(document).off();//移除事件 }) return false; }) }) </script> </head> <body> <div></div> </body> </html>
相关文章推荐
- 数据库水平切分的实现原理解析---分库,分表,主从,集群,负载均衡器
- iOS的内存管理
- SPOJ QTREE6 Query on a tree VI 树链剖分
- Markdown引入图片,github版
- HDOJ 1021 Fibonacci Again
- PHP: fopen() Permission denied
- 路由器桥接(WDS) 无法从副路由(B路由,从路由)上网 解决方法(DHCP设置)
- Java基础之理解Annotation
- centos7下安装composer
- C#中实现并发的几种方法以及其性能测试
- Nginx+php fastcgi 发生 Access Denied
- todo:关于Delphi的几个问题
- Java微信公众平台开发(6) 微信开发中的token获取
- python迭代器与生成器详解
- python生成器表达式和列表解析
- Python中random模块生成随机数详解
- 深入学习python的yield和generator
- Windows下Python的Django框架环境部署及应用编写入门
- PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
- 简单谈谈php浮点数精确运算