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>
如果哪里写的不好，欢迎指出。
Jquery 实现层的拖动，支持回调函数的更多相关文章
- jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
- jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)
Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...
- jQuery基础的动画里面的回调函数
<style> *{margin:0; padding:0;} #target{ border-radius:10px; background:#eee; } .fade{/*动画起始状态 ...
- 小兔JS教程（三）-- 彻底攻略JS回调函数
这一讲来谈谈回调函数. 其实一句话就能概括这个东西: 回调函数就是把一个函数当做参数,传入另一个函数中.传进去的目的仅仅是为了在某个时刻去执行它. 如果不执行,那么你传一个函数进去干嘛呢? 就比如说对 ...
- js中replace的回调函数使用。
这只是一个小问题,但是之前并没有发现.这个问题就是replace的第二个函数是支持回调函数的. var ext = new RegExp('f','g'); 1.str.replace(ext ,1) ...
- node基础06：回调函数
1.Node异步编程 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,No ...
- Node.js 学习（四）Node.js 回调函数
Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都 ...
- c++回调函数
dcc组件支持回调函数接口,当连接/断开连接对端时,调用传入的函数指针. A库和B库想做到不耦合,但是A库需要用到B库的某些函数,A库提供回调函数接口,在初始化的时候指定回调函数,降低耦合程度,每一个 ...
- Node.js 回调函数
Node.js 回调函数 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数, ...
随机推荐
- 构建第一个Spring Boot2.0应用之RequestMapping（四）
在学习controller的时候,测试了在RequestMapping中,value参数中配置集合,实现不同的URL访问同一方法. 本章继续学习和测试RequestMapping的其他特性. 一.Pa ...
- JAVA中的多态概念
多态性是指同一操作作用于某一类对象,可以有不同的解释,产生不同的执行结果. 多态存在的三个必要条件 需要存在继承和实现关系 同样的方法调用而执行不同操作,运行不同代码. 在运行时父类或者接口的引用变量 ...
- 杭电acm刷题顺序
最近兴趣来了,闲暇之余,回顾大学期间刷过的杭电acm那些入门级别的题,以此巩固基础知识! 以下参考刷题顺序,避免入坑 原文传送门:https://blog.csdn.net/liuqiyao_01/a ...
- kubernetes发布解释型语言应用的最佳实践
说明 k8s在发布编译型语言的应用时,几乎不用多考虑,就会选择将编译好jar/war包(java语言)或者二进制文件(golang/c++)直接打到镜像当中,生成新的应用镜像,然后将镜像推到镜像仓库, ...
- codevs 2620 战壕
时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description Smart和Sarah正在玩一个即时战略游戏. Smart在他的基地附近建立了n个 ...
- 平时对ES6的一些总结
1.Genertor中yield和Interator中的next方法 Genertor的yield是把这个函数变成分段的:Interator中的next也是一个一个执行的: function* f() ...
- libav(ffmpeg)简明教程（2）
距离上一次教程又过去了将近一个多月,相信大家已经都将我上节课所说的东西所完全消化掉了. 这节课就来点轻松的,说说libav的命令使用吧. 注:遇到不懂的或者本文没有提到的可以用例如命令后加 --hel ...
- codeforce 599B Spongebob and Joke
一道水题WA那么多发,也是醉了.f看成函数的话,其实就是判断一下反函数存不存在. 坑点,只能在定义域内判断,也就是只判断b[i].没扫一遍前不能确定Impossible. #include<bi ...
- POJ 3233 Matrix Power Series （矩阵分块，递推）
矩阵乘法是可以分块的,而且幂的和也是具有线性的. 不难得到 Si = Si-1+A*Ai-1,Ai = A*Ai-1.然后矩阵快速幂就可以了. /*************************** ...
- Codeforces Round #323 (Div. 2) C GCD Table 582A （贪心）
对角线上的元素就是a[i],而且在所在行和列中最大, 首先可以确定的是最大的元素一定是a[i]之一,这让人想到到了排序. 经过排序后,每次选最大的数字,如果不是之前更大数字的gcd,那么只能是a[i] ...