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 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
js实现贪吃蛇游戏(简易版)
Sep 29 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(视频)Http下载
2006/12/12 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vue中appear的用法
2017/08/17 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python Requests安装与简单运用
2016/04/07 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python第三方库学习笔记
2020/02/07 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
高中自我评价分享
2013/12/05 职场文书
运动会100米解说词
2014/01/23 职场文书
在职员工证明书
2014/09/19 职场文书
护理实习生带教计划
2015/01/16 职场文书
小学教师自我评价
2015/03/04 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
步步惊心观后感
2015/06/12 职场文书
运动会主持词大全
2015/07/02 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA