jQuery 拖动层(在可视区域范围内)


Posted in Javascript onMay 24, 2012
(function($){ 
$.fn.extend({ 
mydrag:function(){ 
var boxX = 0; //元素在页面中的横坐标 
var boxY = 0; //元素在页面中的纵坐标 
var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 
var dMouseY = 0; //按下鼠标时的鼠标所在位置的纵坐标 
var mMouseX = 0; //移动鼠标时的鼠标所在位置的横坐标 
var mMouseY = 0; //移动鼠标时的鼠标所在位置的纵坐标 
var moveLenX = 0; //存放鼠标移动的距离,横向 
var moveLenY = 0; //存放鼠标移动的距离,纵向 
var isMove = false; //是否拖动层的一个输助"开关" 
var movingX = 0; //移动中元素的LEFT值 
var movingY = 0; //移动中元素的TOP值 
//可视区域最右边的值 
var rightest = document.documentElement.clientWidth - $(".top").parent().outerWidth(); 
//可视区域最右边的值 
var bottomest = document.documentElement.clientHeight - $(".top").parent().outerHeight(); 
//获得移动鼠标时的鼠标所在位置的坐标 
var getMoveMouse = function(move){ 
mMouseX = move.pageX; 
mMouseY = move.pageY; 
} 
//获得元素在页面中的当前的位置 
var getbox = function(m){ 
boxX = $(".box").offset().left; 
boxY = $(".box").offset().top; 
} 
//获得鼠标按下时的坐标 
var getDownMouse = function(m){ 
dMouseX = m.pageX; 
dMouseY = m.pageY; 
} 
//获得鼠标移动的距离值 
var getMoveLen = function(){ 
moveLenX = mMouseX - dMouseX; 
moveLenY = mMouseY - dMouseY; 
} 
//鼠标UP时,关闭移动,即鼠标移动也不会让元素移动; 
$(document).mouseup(function(){ 
isMove = false; 
}) 
//给元素的TOP绑定事件 
$(this). 
//按下时获得元素的坐标和当前鼠标的坐档; 
mousedown(function(e){ 
getbox(e); 
getDownMouse(e) 
isMove = true; 
}). 
//移动时获得移动的距离,设置元素的TOP和LEFT值; 
mousemove(function(e){ 
var $this = $(this); 
getMoveMouse(e); 
getMoveLen(); 
if(isMove){ 
//防止元素移出可视区域 
//可视区域浏览器最左边 
if(movingX<0){ 
$this.css({"left":0}); 
if(movingY<0){ 
$this.css({"top":0}); 
}else if(movingY > bottomest){ 
$this.css({"top":bottomest}); 
}else{ 
$this.css({"top":boxY+moveLenY}); 
} 
} 
//可视区域浏览器最上面 
else if(movingY<0){ 
$this.css({"top":0}); 
if(movingX>rightest){ 
$this.css({"left":rightest}); 
}else{ 
$this.css({"left":boxX+moveLenX}); 
} 
} 
//可视区域浏览器最右边 
else if(movingX > rightest){ 
$this.css({"left":rightest}); 
if(movingY > bottomest){ 
$this.css({"top":bottomest}); 
}else{ 
$this.css({"top":boxY+moveLenY}); 
} 
} 
//可视区域浏览器最下边 
else if(movingY > bottomest){ 
$this.css({"top":bottomest}); 
if(movingX<0){ 
$this.css({"left":0}); 
}else{ 
$this.css({"left":boxX+moveLenX}); 
} 
} 
//其它情况,即在可视区域中间 
else{ 
$this.css({"left":boxX+moveLenX,"top":boxY+moveLenY}); 
} 
movingX = boxX+moveLenX; 
movingY = boxY+moveLenY; 
} 
}) 
} 
}) 
})(jQuery)

主要思路:

1.鼠标移动多少距离,元素就同时移动多少距离,所以要获取到鼠标移动的距离;

2.鼠标按下,并且移动,才拖动层。所以需要一个“开关”,在移动按下时打开,如果鼠标这里移动了,那么就移动层,如果这个“关闭”,那么鼠标移动时,层也不会一起移动。

3.获取层元素,在浏览器可视区域的最左、最边,最上、最下的值。并且在拖动层的过程中,把当前层的坐标值,去和这几个值,做比较,如果超过这些值。那么就不能再拖动这个方向,即把值设为最小或最大。
感觉我这些判断有点复杂,有高手指点下,怎么简化下吗?

下载DEMO

Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
TypeScript入门-接口
Mar 30 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 #Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 #Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 #Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 #Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 #Javascript
JavaScript之编码规范 推荐
May 23 #Javascript
javascript的数据类型、字面量、变量介绍
May 23 #Javascript
You might like
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
JavaScript模块模式实例详解
2017/10/25 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
传播学毕业生求职信
2013/10/11 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书