本文將實現一個拖動效果，具體的效果類似qq客戶端在桌面上任意位置拖動。
1.首先是HTML部分
<style>
*{margin: 0;padding: 0;}
html,body{
height: 100%;//保證獲取body的寬度是整個頁面的寬度
overflow: hidden;//防止出現滾動條
}
#move{
position: absolute;
top: 0;left: 0;
width: 120px;
height: 30px;
border: 1px solid #f5f5f5;
background: rgba(0,0,0,.5);
cursor: all-scroll;//鼠標移上爲拖動樣式
}
</style>
</head>
<body>
<div id="move"></div>
主要想法爲給#move設置鼠標事件，動態改變#move的top和left的值。
2.jQuery代碼部分
第一步，分別獲取body和#move的寬度和高度
var width = parseInt($('body').css('width'));
var height = parseInt($('body').css('height'));
var moveW = parseInt($('#move').css('width'));
var moveH = parseInt($('#move').css('height'));
第二步，給#move綁定鼠標按下事件
$('#move').on('mousedown',function(e){
var top = parseInt($(this).css('top'));
var left = parseInt($(this).css('left'));
x1 = e.pageX;
y1 = e.pageY;
}
第三步是當鼠標在#move上按下的時候$(document)的鼠標事件
$(document).on('mousemove',function(e){
var x2 = e.pageX;
var y2 = e.pageY;
x2 = x2 - x1;//獲取鼠標移動的寬度
y2 = y2 - y1;//獲取鼠標移動的高度
x = left + x2;
y = top + y2;
//判斷在x方向上移動是否已經到邊緣部分
if(x<=0){
x = 0;
}
var _x = x + moveW;
if(_x>=width){
x = width - moveW;
}
//判斷在y方向上移動是否已經到邊緣部分
if(y<=0){
y = 0;
}
var _y = y + moveH;
if(_y>=height){
y = height - moveH;
}
$('#move').css({'top':y,'left':x});
});
第四步，鼠標卸載後的取消綁定事件
$("#move").on('mouseup',function(){
$(document).unbind('mousemove');
});
//當鼠標超出網頁之外時，取消綁定，避免鼠標移出網頁返回後還能影響#move
$(document).on('mouseup',function(){
$(document).unbind('mousemove');
});
最後簡單封裝成一個函數
(function(){
//定義拖動對象
var drag = function (obj){
this.body = obj.body;
this.move = obj.move;
this.width = parseInt(this.body.css('width'));
this.height = parseInt(this.body.css('height'));
this.moveW = parseInt(this.move.css('width'));
this.moveH = parseInt(this.move.css('height'));
this.func();
this.unbindM();
this.unbindD();
};
//初始化函數
drag.init = function(obj){
new drag(obj);
};
drag.prototype.func = function(){
var self = this;
self.move.on('mousedown',function(e){
var top = parseInt($(this).css('top'));
var left = parseInt($(this).css('left'));
x1 = e.pageX;
y1 = e.pageY;
$(document).on('mousemove',function(e){
var x2 = e.pageX;
var y2 = e.pageY;
x2 = x2 - x1;
y2 = y2 - y1;
x = left + x2;
y = top + y2;
if(x<=0){
x = 0;
}
var _x = x + self.moveW;
if(_x>=self.width){
x = self.width - self.moveW;
}
if(y<=0){
y = 0;
}
var _y = y + self.moveH;
if(_y>=self.height){
y = self.height - self.moveH;
}
self.move.css({'top':y,'left':x});
});
})
};
drag.prototype.unbindM = function(){
this.move.on('mouseup',function(){
$(document).unbind('mousemove');
});
};
drag.prototype.unbindD = function(){
$(document).on('mouseup',function(){
$(document).unbind('mousemove');
});
}
//在window上註冊拖動對象
window['drag'] = drag;
})(jQuery);
//定義對象，將jquery對象作爲屬性保存
var obj = {};
obj.body = $('body');
obj.move = $('#move');
drag.init(obj);