最近在写一个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库文件。<br>// 调用================================================= $(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>
欢迎大家阅读《Jquery 实现层的拖动，支持回调函数_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Jquery 实现层的拖动，支持回调函数_js
转载请注明原文链接：Jquery 实现层的拖动，支持回调函数_js
