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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
SONY SRF-M100的电路分析
2021/03/02 无线电
9个实用的PHP代码片段分享
2015/01/22 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascript 播放器 控制
2007/01/22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
javascript每日必学之循环
2016/02/19 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
浅谈layui里的上传控件问题
2019/09/26 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python新手实现2048小游戏
2015/03/31 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python的launcher用法知识点总结
2020/08/07 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
教育读书笔记
2015/07/02 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers