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>

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