赢友网络

Jquery 实现层的拖动，支持回调函数

最近在写一个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>

　　如果哪里写的不好，欢迎指出。

posted @ 2014-04-21 15:29  新生帝  阅读(2288)  评论(12)  编辑  收藏  举报
赢友网络