以下讨论的是和相关的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代码。
关于Jquery 实现层的拖动,支持回调函数的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2014042893118.shtml方便下次再访问哦。