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

178 阅读 0 评论 118 点赞

我是靠谱客的博主机灵夕阳，最近开发中收集的这篇文章主要介绍jQuery 拖动层(在可视区域范围内)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
(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