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 相关文章推荐
Js动态创建div
Sep 25 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
JavaScript 序列化对象实现代码
Dec 18 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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的access操作类
2008/04/09 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python语言中with as的用法使用详解
2018/02/23 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
C#软件工程师英语面试题
2015/06/07 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
年终奖发放方案
2014/06/02 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
关于EntityWrapper的in用法
2022/03/22 Java/Android
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS