複製代碼 代碼如下:(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
