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中的浮点型运算问题
Jan 06 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
Javascript call及apply应用场景及实例
Aug 26 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 数字左侧自动补0
2008/03/31 PHP
php实现的在线人员函数库
2008/04/09 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
使用Apache的rewrite
2021/03/09 Servers
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python构建自定义回调函数详解
2017/06/20 Python
python机器学习之神经网络(一)
2017/12/20 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python访问hdfs的操作
2020/06/06 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
安全检查与奖惩制度
2014/01/23 职场文书
自荐信格式简述
2014/01/25 职场文书
高三高考决心书
2014/03/11 职场文书
报名委托书
2015/01/29 职场文书
《灰雀》教学反思
2016/02/19 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL