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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vue移动端使用canvas签名的实现
Jan 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
神族 Protoss 历史背景
2020/03/14 星际争霸
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Django URL参数Template反向解析
2020/11/24 Python
大学团支书的自我评价分享
2013/12/14 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
服务标语口号
2014/07/01 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
生活部的活动方案
2014/08/19 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
商铺门面租房协议书
2014/10/21 职场文书
乔迁新居祝福语
2019/11/04 职场文书