jQuery拖拽div实现思路


Posted in Javascript onFebruary 19, 2014

思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是

1、组件左上角与屏幕左上角的相对位置

2、鼠标所在坐标与组件左上角的相对位置。

具体函数如下:

.drag{ 
position:absolute; 
background:#0000CC; 
top:100px;left:200px; 
padding:0; 
}

$(document).ready(function(){ 
var move=false;//移动标记 
var _x,_y;//鼠标离控件左上角的相对位置 
$(".drag").mousedown(function(e){ 
move=true; 
_x=e.pageX-parseInt($(".drag").css("left")); 
_y=e.pageY-parseInt($(".drag").css("top")); 
}); 
$(document).mousemove(function(e){ 
if(move){ 
var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 
var y=e.pageY-_y; 
$(".drag").css({"top":y,"left":x}); 
} 
}).mouseup(function(){ 
move=false; 
});

其中e.pageX,e.pageY为当前鼠标的横纵坐标。

大家自己动手试一下,思路就更加清晰了~

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue中轮训器的使用
Jan 27 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
token 机制和实现方式
Dec 15 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
javascript实现动态侧边栏代码
Feb 19 #Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 #Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 #Javascript
You might like
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
Node.js事件驱动
2015/06/18 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python微信好友数据分析详解
2018/11/19 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python绘制封闭多边形教程
2020/02/18 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Pandas之缺失数据的实现
2021/01/06 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
欢送退休感言
2014/02/08 职场文书
师德师风剖析材料
2014/09/30 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python