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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
react项目从新建到部署的实现示例
Feb 19 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
js实现数字滚动特效
2019/12/16 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
如何运行Python程序的方法
2013/04/21 Python
Python入门篇之列表和元组
2014/10/17 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
python实现神经网络感知器算法
2017/12/20 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
关于python字符串方法分类详解
2019/08/20 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
网络管理员岗位职责
2014/03/17 职场文书
个人授权委托书范本
2014/04/03 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
导游词之神仙居景区
2019/11/15 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏