最近在寫一個CMS內容管理系統，前台基本是用ajax異步請求服務器，通過ashx處理,返回json格式處理。由於需要更加人性化的界面，所以采用到了拖動層的操作。
以下是拖動層的主要核心方法，本來想寫成插件的，考慮的沒那么多時間，就以方法的方式了。
/*
* Jquery 鼠標左鍵拖動面板
* coder：新生帝
* obj：jQuery選擇器名稱
* callback：回調函數（拖動停止要執行的函數），可通過$(this)獲取 obj 對象
*/
function movePanel(obj,callback){
var _evenObj=null; // 觸發事件的對象
var _move=false; // 移動標識
var _x,_y; //鼠標離控件左上角的相對位置
$(obj).bind({
mousedown:function(e){
_evenObj=e.currentTarget; // 當前觸發的作用對象
_move=true;
var cx=$(_evenObj).position().left; // 獲取父類的X軸偏移量，如果相對屏幕的偏移量，請把position()改為offset();
var cy=$(_evenObj).position().top; // 獲取父類的Y軸偏移量 , 同上
_x=e.pageX-cx;
_y=e.pageY-cy;
},
mouseup:function(){
//判斷方法是否存在
if (typeof callback != 'undefined' && callback instanceof Function) {
$ext=$.extend({},$(obj)); // 為obj對象擴展回調方法
$ext.addMethod=callback;
$ext.addMethod();
}
}
});
$(document).bind({
mousemove:function(e){
if(e.which==1){ // 判斷是否是左鍵按下
if(_evenObj!=null){ // 判斷觸發事件的對象是否為空
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(_evenObj).css({
top:y,
left:x
});
}
}
}
},
mouseup:function(){
_evenObj=null;
_move=false;
}
});
}
上面就是實現鼠標左鍵拖動的主要方法，下面是調用：
//別忘了引用Jquery庫文件。
// 調用================================================= $(function () { movePanel(".move",function(){ //有回調函數 alert("哈哈哈，我是執行完后在顯示的，我作用的對象是class為："+$(this).attr("class")+" 的div"); }); movePanel(".move2"); //沒有回調函數 }); //=====================================================
這樣就可以通過簡單的方法調用實現層的拖動，支持回調函數，如果想拓展的話，可以在 $(obj).bind({})中拓展。
以下是拖動層網站的HTML代碼。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Jquery 鼠標左鍵拖動面板
* coder：新生帝
* obj：jQuery選擇器名稱
* callback：回調函數（拖動停止要執行的函數），可通過$(this)獲取 obj 對象
*/
function movePanel(obj,callback){
var _evenObj=null; // 觸發事件的對象
var _move=false; // 移動標識
var _x,_y; //鼠標離控件左上角的相對位置
$(obj).bind({
mousedown:function(e){
_evenObj=e.currentTarget; // 當前觸發的作用對象
_move=true;
var cx=$(_evenObj).position().left; // 獲取父類的X軸偏移量，如果相對屏幕的偏移量，請把position()改為offset();
var cy=$(_evenObj).position().top; // 獲取父類的Y軸偏移量 , 同上
_x=e.pageX-cx;
_y=e.pageY-cy;
},
mouseup:function(){
//判斷方法是否存在
if (typeof callback != 'undefined' && callback instanceof Function) {
$ext=$.extend({},$(obj)); // 為obj對象擴展回調方法
$ext.addMethod=callback;
$ext.addMethod();
}
}
});
$(document).bind({
mousemove:function(e){
if(e.which==1){ // 判斷是否是左鍵按下
if(_evenObj!=null){ // 判斷觸發事件的對象是否為空
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(_evenObj).css({
top:y,
left:x
});
}
}
}
},
mouseup:function(){
_evenObj=null;
_move=false;
}
});
}
// 調用=================================================
$(function () {
movePanel(".move",function(){ //有回調函數
alert("哈哈哈，我是執行完后在顯示的，我作用的對象是class為："+$(this).attr("class")+" 的div");
});
movePanel(".move2"); //沒有回調函數
});
//=====================================================
</script>
<style type="text/css">
*{margin:0;padding:0;}
.move{width:500px; height:300px; position:absolute; left:0; top:0; border:1px solid #ccc; background:#e5e5e5;cursor: move; /* */}
.move2{width:200px; height:300px; position:absolute; right:0; top:0; border:1px solid #ccc; background:#e5e5e5;cursor: move;}
</style>
</head>
<body>
<div class="move">
</div>
<div class="move2">
</div>
</body>
</html>
如果哪里寫的不好，歡迎指出。